Question

我正在使用track by $index，因为我想在我的数组中允许重复元素，但同时这会在从此集合中删除元素时产生副作用。

我有这组玩家，在控制器中声明为$scope.players = []。

您可以按如下方式填充此数组：

<input type="text" ng-model="player">
<button ng-click="addPlayer()">

addPlayer()只需将player模型推送到players数组：

$scope.addPlayer = function() {
    if (!$scope.player)
        return;
    $scope.players.push($scope.player);
    $scope.player = null;
};

使用ng-repeat显示该集合。但是当点击某个项目时，也应将其删除。

<div ng-repeat="player in players track by $index" ng-click="deletePlayer($index)">
    {{player}}
</div>

$scope.deletePlayer = function(index) {
    if (index > -1)
        $scope.players.splice(index, 1);
};

问题是，由于它是按索引进行跟踪，当一个元素被移除时，玩家的集合将会缩短1，因为集合已经改变。

我的意思如下：说我有一系列的玩家["p1", "p2", "p3"]。如果我删除除最后一个之外的其中一个，例如p1，则ng-repeat未显示[p2, p3]，即使这些是数组的内容，但它只显示{{1} }}。当我说集合是一个简短的元素时，这就是我的意思。

我认为问题的发生是因为p3模式中ng-repeat未知数组的长度发生了变化。因此，它在迭代更改的数组时跳过一个元素，因为它使用旧索引来迭代它，我相信。

是否有解决此副作用的标准方法？

Answer 1

问题出在deletePlayer函数上。你的论点名称是＆＃39; i＆＃39;但你正在尝试使用＆＃39; index＆＃39;代替。

此：

$scope.deletePlayer = function(i) {
  if (i > -1)
    $scope.players.splice(index, 1);
};

应该是：

$scope.deletePlayer = function(i) {
  if (i > -1)
    $scope.players.splice(i, 1);
};

Answer 2

您可以将players数组中的每个项目设为具有name和id属性的对象。 Demo

Object.assign($scope, {
  players: [],
  player: '',
  addPlayer: function() {
    if(!$scope.player) {
      return 
    }

    $scope.players = $scope.players.concat({
      name: $scope.player,
      id: Date.now() //fake id (timestamp)
    })

    $scope.player = ''
  },

  deletePlayer: function(id) {
    $scope.players = $scope.players.filter(function(player){
      return player.id !== id
    })
  }
})

  <div ng-repeat="player in players track by player.id" ng-click="deletePlayer(player.id)">
    {{player.name}}
  </div>

Answer 3

在您可以使用的元素中：ng-click="remove(phones, $index)

在代码中：

$scope.remove = function(array, index){
    array.splice(index, 1);
}

这种方法不应该有任何问题。

ng-repeat跟踪$ index并从数组中删除元素

3 个答案: