Angular.js在奇偶選擇的行中刪除具有不同背景顏色的表行

Question

我在奇偶行中有一個具有不同背景顏色的表，對於選定的行，也有不同的背景顏色。 一個按鈕，用於刪除與表數據綁定的數組中的對象。

問題是，當我刪除表或數組的第一行時，新的第一行背景色（已選定）沒有更改為選定的背景色（我認為它仍然是先前的CSS類）。 但是，當我刪除另一行時，沒有任何問題，新選擇的行具有預期的背景顏色。

 var app = angular.module("myApp", []); app.controller("aCtrl", function($scope, $http) { $scope.arr_obj = [{ "num": 1, "title": "abc", }, { "num": 2, "title": "def" }, { "num": 3, "title": "ghi" }, { "num": 4, "title": "lmn" }, { "num": 5, "title": "opq" } ]; $scope.selectedId = 0; $scope.setindex = function(id) { $scope.selectedId = id; } $scope.remove_click = function() { if ($scope.arr_obj.length >= 1) { $scope.arr_obj.splice($scope.selectedId, 1); if ($scope.arr_obj.length >= 1) { if ($scope.selectedId >= 1) { $scope.selectedId = $scope.selectedId - 1; } else { $scope.selectedId = 0; } console.log($scope.selectedId); } } } $scope.ClassOdd = function(id) { if (id === $scope.selectedId) return "selected"; else return "odd"; }; $scope.ClassEven = function(id) { if (id === $scope.selectedId) return "selected"; else return "even"; }; }); 

 table, th, td { border: 1px solid black; } .selected { background-color: pink; } .odd { background-color: green; } .even { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> <div ng-app="myApp" ng-controller="aCtrl" class="main"> <div> <table> <tr> <th>title</th> <th>checkbox</th> </tr> <tr ng-repeat="row in arr_obj" ng-click="setindex($index)" ng-class-odd="ClassOdd($index)" ng-class-even="ClassEven($index)"> <td>{{row.num}}</td> <td>{{row.title}}</td> </tr> </table> </div> <input type="button" value="Remove" ng-click="remove_click($index)"> <p>current selectedId = {{selectedId}} <p> </div> 

https://jsfiddle.net/jx8ztcum/

我可以知道這是怎么發生的嗎？ 有什么解決辦法嗎？

Answer 1

您可以通過將解決這個問題 track by表達你的ng-repeat 。

為什么要跟蹤

track by用於將數據與ng-repeat生成的DOM鏈接-這對ng-repeat列表中的分頁，過濾，添加/刪除很有用。

（通過向ng-repeat集合中注入$$hashKey屬性，無需track by角度track by將DOM與集合鏈接起來，並將在集合中進行任何更改來重新生成它）

請參閱下面的演示，並Updated fiddle here ：

 var app = angular.module("myApp", []); app.controller("aCtrl", function($scope, $http) { $scope.arr_obj = [{"title": "abc"},{"title": "def"},{"title": "ghi"},{"title": "lmn"},{"title": "opq"}]; $scope.selectedId = 0; $scope.setindex = function(id) { $scope.selectedId = id; } $scope.remove_click = function() { if ($scope.arr_obj.length >= 1) { $scope.arr_obj.splice($scope.selectedId, 1); if ($scope.arr_obj.length >= 1) { if ($scope.selectedId >= 1) { $scope.selectedId = $scope.selectedId - 1; } else { $scope.selectedId = 0; } console.log($scope.selectedId); } } } $scope.ClassOdd = function(id) { if (id === $scope.selectedId) return "selected"; else return "odd"; }; $scope.ClassEven = function(id) { if (id === $scope.selectedId) return "selected"; else return "even"; }; }); 

 table, th, td { border: 1px solid black; } .selected { background-color: pink; } .odd { background-color: green; } .even { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="aCtrl" class="main"> <div> <table> <tr> <th>num</th> <th>title</th> </tr> <tr ng-repeat="row in arr_obj track by $index" ng-click="setindex($index)" ng-class-odd="ClassOdd($index)" ng-class-even="ClassEven($index)"> <td>{{$index}}</td> <td>{{row.title}}</td> </tr> </table> </div> <input type="button" value="Remove" ng-click="remove_click($index)"> <p>current selectedId = {{selectedId}}<p> </div>