выделение предыдущей строки после нажатия ng

0

У меня есть раскрывающийся список, содержащий идентификаторы брендов. в соответствии с идентификатором, получая соответствующие продукты и отображая его в таблице. В каждой строке есть две кнопки, которые перемещают продукты вверх и вниз, в основном, переставляя ряды. теперь я могу выполнять все функции взаимозаменяемости и привязки ребра. Строка выбирается при нажатии. моя единственная проблема: я не могу выбрать строку после ее перемещения вверх или вниз.

             <div ng-app="myapp" ng-controller="prodctrl">
               <select id="BrandDropdown" class="InstanceList" ng-change="GetBrandProd()" ng-model="Products">

               <option>Select Brand</option>    //Sample Data
               <option value=1>Brand 1<option>
               <option value=2>Brand 2<option>

             </select>
       <table id="prodtab" ng-model="Products">
         <tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">
            <td>{{P.Id}}</td>
            <td>{{P.Rank}}</td>
            <td>{{P.Name}}</td>
            <td>
                <input type="button" value="Move Up" id="moveup" ng-click="getval(P,$index)" /></td>
            <td>
                <input type="button" value="Move Down" /></td>
        </tr>
    </table>
</div>

это код angularjs

           <script>
         var app = angular.module('myapp', []);
        var prod = null;
      var mveup = null;
      var mvedwn = null;
         var ind = null;
         app.controller('prodctrl', function ($scope, $http) {
            //getting products for each brand
           $scope.GetBrandProd = function () {
         cursel = "B";
         var Id = $('#BrandDropdown').val();
           fetchtype = Id;
          brid = Id;
              $http({
              method: "GET",
              url: "/Home/GetProdBrand",
              params: {
                  id: Id
                      }


                     })
                 .success(function (response) {
                  var data = response;
                     $scope.Products = data;
                 prod = data;
                   });

                       };

              //changing color of row when clicked
            $scope.setselected = function (index) {

               if ($scope.lastSelected) {
                  $scope.lastSelected.selected = '';
                  }
                if (mveup == null) {
                this.selected = 'trselected';
                 $scope.lastSelected = this;
                }
              else {
                 mveup = null;
               //this.selected = '';
                 $(this).closest('tr').prev().prop('Class', 'trselected');

                  }



              };
               //function to move product up in ranking
             $scope.getval = function (p, index) {
             var Idcur = p.Id;
             var Rankcur = p.Rank;
             ind = index;
              if ($scope.Products[index - 1] != null) {
                var IdPrev=$scope.Products[index - 1].Id;
                var Rankprev = $scope.Products[index - 1].Rank;

               mveup = null;
                $scope.lastSelected = this;

               if (cursel == "B") {

                fetchtype = brid;
                 }
                 else if (cursel == "C") {
                 }
                  mveup = true;
               $http({
                 method: "GET",
                 url: "/Home/MoveProd",
                   params: {
                      Curid: Idcur,
                      CurRank: Rankcur,
                      ChngId: IdPrev,
                      ChngRnk: Rankprev,
                      Type: cursel,
                      Id: fetchtype
                  }


               })
               .success(function (response) {
               // ranks are interchanged and the data is returned.
                   var data = response;
                   $scope.Products = data;
                   prod = data;




               });
           }
       }

    })
  </script>
Теги:
asp.net-mvc

2 ответа

1
Лучший ответ

Похоже, способ обработки выбора строки неверен.

Я только что изменил способ обработки выбора здесь.

 <tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" ng-class="{selected: selectedIndex == $index}">

//JS

  $scope.setselected = function(index) {
    $scope.selectedIndex = index;
  };

Кроме того, я сделал plunker с некоторыми образцами, чтобы подражать вашему требованию, вы можете спросить больше, если это не соответствует вашим требованиям.

Plunker

  • 0
    спасибо ты спас мне жизнь
1

У вас уже есть идентификатор продукта, на который был Idcur (я думаю, глядя на ваш код, Idcur), поэтому вы можете перебирать результаты в блоке success запроса /Home/MoveProd GET и устанавливать запись с помощью совпадение идентификатора с выбранным? Что-то вроде

var products = $scope.Products.filter(function(product) {
   return product.id == Idcur;
})

if (products && products.length > 0) {
    products[0].selected = 'trselected';
}

то на вашей странице просто обновите ng-repeat немного, чтобы выбрать selected класс из продукта, а не область, поэтому:

<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">

становится

<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{P.selected}}">

или что-то типа того :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню