javascript - Angularjs删除奇偶选定行中具有不同背景颜色的表行

Question

我有一个表格，在奇偶行中有不同的背景颜色，而且选定的行也有不同的背景颜色。用于删除数组中与表数据绑定(bind)的对象的按钮。

问题是当我删除表格或数组的第一行时，新的第一行背景颜色(已选中)没有更改为所选背景颜色(我认为它仍然是以前的 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 属性注入(inject) 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>