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角度将DOM与集合链接起来，方法是将$$hashKey属性注入ng-repeat集合，并在集合中进行任何更改时重新生成它。

请参阅下面的演示和Updated fiddle here：

＆＃13;

＆＃13;

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";
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;