javascript - ng-repeat limit 使删除成为问题

Question

我有 1 个添加 md-datepicker 的 ng-click :

<md-button ng-click="addItem()" type="button" >Add Infants</md-button>

然后 ng-repeat 设置为 4 :

ng-repeat="d in radioData | limitTo: 4 "
ng-value="d.value"
ng-class="{'md-align-top-left': $index==1}"

一切都按预期工作，但我有 1 ng-click 用于删除:

<md-button ng-click="removeItem()" type="button">Remove Infants</md-button>

如果在 addItem() 上单击超过 4 次，问题就开始了，它不会显示，但要删除它，首先要删除额外的内容，这有点奇怪。看起来它在那里但没有显示。我通过 $index 阅读了有关 track 的信息，但无法正常工作。我的 Controller 是:

$scope.addItem = function() {
  $scope.radioData.push({});
};
$scope.removeItem = function() {
  $scope.radioData.pop();
};  

任何想法都会帮助我

Answer 1

当您调用 addItem() 时，您将一个新结构推送到 radioData。但是，您通过ng-repeatlimitTo:4将显示的数据限制为四项。这意味着您仍然可以向 radioData 数组添加四个以上的项目，只是它们不会与 ng-repeat 一起显示。因此，当您在向 radioData 数组添加超过四个项目后删除元素时，您的 radioData 数组中仍然有超过四个项目。

您可以通过限制 radioData 数组中允许存在的项目数来解决此问题，如下所示:

$scope.addItem = function() {
  if ($scope.radioData.length < 4) { //Check there is space for the new struct
    $scope.radioData.push({});
  }
};