ng-repeat 限制使删除问题

Question

我有 1 ng-click 添加 md-datepicker ：

<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 阅读了有关曲目，但没有工作。 我的控制器是：

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

任何想法都会帮助我

Answer 1

当您调用addItem() 时，您会将一个新结构推送到radioData。但是，您通过limitTo:4 和ng-repeat 将显示的数据限制为四个项目。这意味着您仍然可以向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({});
  }
};