如何防止删除和添加所有部分 - AngularJS

Question

我在添加多个部分时遇到问题，并且在每个部分尝试添加其他问题，但所有部分都添加了这些问题。希望有人能帮忙。

Answer 1

这是因为您的问题数组在控制器范围内，对集合的任何更改都会反映到所有子范围。一种选择是将问题集合保留为项目对象的一部分，并在 add/remove、

上更新每个单独的问题集合

 $scope.Add_Section = function() {
    $scope.items.push({questions:[]});
  };

和

 <div class="input-group" ng-repeat="question in item.questions" style="margin-bottom: 15px;">

现在，由于问题成为嵌套集合，删除问题变得有点棘手，您需要删除项目和问题的索引。 $parent 在这里派上用场来获取项目的索引

$scope.Remove_Question = function(parentIndex,index) {
    $scope.items[parentIndex].questions.splice(index, 1);
  }

和

<span class="input-group-addon" style="cursor: pointer;" ng-click="Remove_Question($parent.$index,$index)">

Updated Plunk

Answer 2

仅一个问题数组不足以表示每个 items 部分。仔细想想，每个 item 肯定有一个数组。正如 NMittal 所建议的，您可以将每个 item 的 questions 设为属性。那会起作用的。

另一种方法，如果您想将它们分开，是确保 questions 数组的结构与 items 数组匹配。

http://plnkr.co/edit/s7RUfUFcjSnr3L0GajkX?p=preview

我们正在使用嵌套的 ng-repeat，因此我们必须临时存储项目数组的 $index 以供 questions.

的 ng-repeat 使用

<div ng-repeat="item in items" data-sec="@{{$index}}" ng-init="itemIndex=$index">

接下来使用该变量：

<div class="input-group" ng-repeat="question in questions[itemIndex]" style="margin-bottom: 15px;">

现在 ng-repeats 至少在正确的地方寻找，但这还不够，因为 Add_Question() 和 Remove_Question() 不知道这个新的数据结构。以下是如何更新它们：

<button ng-click="Add_Question(itemIndex)" class="btn btn-success">Agregar Pregunta</button>

和

<span class="input-group-addon" style="cursor: pointer;" ng-click="Remove_Question($index, itemIndex)">

最后是 JS 方面：

$scope.questions = {};

$scope.Add_Question = function(itemIndex) {
  if($scope.questions[itemIndex] === undefined){
    $scope.questions[itemIndex] = [];
  }
  $scope.questions[itemIndex].push({

  });
};

$scope.Remove_Question = function(index, itemIndex) {
  $scope.questions[itemIndex].splice(index, 1);
}

如何防止删除和添加所有部分 - AngularJS

how to prevent delete and add in all sections - AngularJS

push

splice

angularjs