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後突出顯示前一行

回答

相關問題