使用FormController里面的ng-repeat去除元素

问题描述：

我在ng-repeat里面有一个很大的问题。我需要输入数组并且具有可变大小：用户可以添加和删除此表单的一部分。我需要访问$dirty每个数组元素的值。除了一件事以外的所有工作 - 删除元素不会影响FormControllers。当我删除模型中的部分数组时，ng-repeat正确地从视图中删除了一个元素，但ng-form 未更新它的位置。使用FormController里面的ng-repeat去除元素

plunker

删除之前：

$index = 0, formRepeated.$dirty == true, model.value == 1 

$index = 1, formRepeated.$dirty == false, model.value == 2

我从$scope.model删除元素0。现在我有：

$index = 0, FormController $dirty == true, value == 2

附加的FormController不更新其位置 - 保持它的$dirty, $touched, $erro [R等

的价值观，我想我都试过了，我被卡住。？任何想法如何解决这个问题的任何建议赞赏

HTML：

<div ng-controller="MyController"> 
    <form name="form"> 

    <div ng-repeat="modelPart in model track by $index"> 
     <div ng-form="formRepeated"> 
     <input type="text" ng-model="modelPart.value" name="form_{{$index}}_value"> 
     <button ng-click="$parent.removeFormRepeated($index)"> 
      Remove 
     </button> 
     <div>Is dirty: {{ formRepeated.$dirty }}</div> 
     </div> 
    </div> 
    <button ng-click="addNew()">add new</button> 

    </form> 
</div>

JS：

var app = angular.module('app', []); 

app.controller('MyController', function MyController($scope) { 

    $scope.model = [{value: 1}, {value: 2}]; 

    $scope.addNew = function() { 
    $scope.model.push({}); 
    } 

    $scope.removeFormRepeated = function(index) { 
    $scope.model.splice(index, 1); 
    }; 
});

从ng-repeat中删除“track by $ index”。它应该工作。 –

答

当你采ng-repeat使用$index，要仔细地跟踪它的价值。一旦看到这个link（猛击也提供），以便您可以了解由于$index由于您的问题产生的主要原因。何时该项目被删除，美元指数值行为不端。

我不认为删除$索引本身会帮助 - 我的代码删除ng-model的**正确**元素（array.splice删除预期的元素）。问题在于'formRepeated'FormController，它不会同时被删除。这会导致ng-model的相应部分不匹配。我会试一试 - 希望你是对的。 – matpi314

答

我遇到了同样的问题，解决方案变得非常简单。问题出在@SaiUnique提到的$index。

如果您的重复元素具有唯一性，请使用track by element.uniqueProperty。否则，只需删除track by，只需使用角生成的$$hashKey即可。这将保留你的嵌套表单。见下面的例子。（请注意，我正在使用ControllerAs语法和Angular v1.5.8）。

HTML：

<div ng-controller="Controller as ctrl"> 
    <div ng-repeat="repeatedElement in ctrl.array"> 
     <div ng-form="formRepeated"> 
      <input type="text" ng-model="repeatedElement.value" name="description"> 
      <button ng-click="ctrl.removeFormRepeated(repeatedElement)">Remove</button> 
     </div> 
    </div> 
</div>

内部控制器：

var me = this; 
me.removeFormRepeated = function(elementToDelete){ 
    //traverse the array and remove the element 
    for(var i = 0; i < me.array.length; i++){ 
     //use Angular's $$hashKey as identifier 
     if(me.array[i].$$hashKey === elementToDelete.$$hashKey){ 
      me.array.splice(i, 1); 
     } 
    } 
}

对于超出我的知识，原因使用track by $index时，你可以删除从ng-repeat阵列正确的元素，但相应的FormController处理不当。使用$$hashkey或一个独特的属性，而不是$index似乎解决了这个问题。

我知道这个问题已经有一个答案，但我只是想详细说明，因为我花了很多小时来处理这个自己！

使用FormController里面的ng-repeat去除元素

相关推荐