Angularjs在奇偶数行中删除具有不同背景颜色的表行

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 列表中添加/删除可能很有用。

（没有track by angular 通过将$$hashKey 属性注入ng-repeat 集合来链接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>