ng-click后突出显示前一行

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

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

来源

2015-12-02 Sujit.Warrier

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

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

<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

来源

2015-12-02 09:25:12

谢谢你救了我的命 –

你已经被点击了产品的ID（我认为从看你的代码，它的Idcur），所以，你可以循环在你的导致/Home/MoveProd GET请求的success块，并将具有匹配id的记录设置为选中？像

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

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

的东西，然后，在你的页面，只需更新NG-重复略有回暖从产品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}}">

或类似的东西:)

来源

2015-12-02 09:11:18

ng-click后突出显示前一行

回答

相关问题