Question

我有一个包含品牌ID的下拉列表。根据id我提取相应的产品并将其显示在表格中。每行中有两个按钮，基本上通过交换等级来上下移动产品。现在我能够完成交换和重新绑定的所有功能。单击时会选中该行。我唯一的问题是我无法在向上或向下移动后选择该行。

             <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>

Answer 1

您已经拥有所点击产品的ID（我想从查看您的代码，Idcur），因此您可以在success块的/Home/MoveProd块中循环显示结果{1}} GET请求并设置匹配ID为已选中的记录？像

这样的东西

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}}">

或类似的东西：）

Answer 2

看来，处理行选择的方式不正确。

我刚刚改变了处理选择的方式。

 <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

在ng-click之后突出显示上一行

2 个答案: