避免在NG-模型角度重复 [英] Avoid angular duplicates on ng-model
问题描述
我动态添加输入由pressing一个添加按钮
是JSBin例如的，所以你可以检查我的问题。
每次我preSS我提到的按钮，一个新的输入应该出现，因为你可以看到我有同样的看法2表格/盒由 NG-重复带独立输入和一个单独的添加多个按钮，问题是，当我播放按钮，2个新的投入在2个不同形式的我来了，这不应该发生，新的输入必须只能在当前的形式添加。
＆LT; DIV＆GT;
＆LT; DIV NG重复=运运行轨道由$指数＆GT;
＆所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}＆下; / P＆GT;
＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT;
＆LT; DIV＆GT;
＆LT; DIV NG重复=操作操作跟踪由$指数＆GT; ＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT; ＆LT; / DIV＆GT;
＆LT;按钮NG点击=operations.push（{}）＆gt;添加多一个＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
JS：
angular.module（'ionicApp'，[]）.controller（'mainCtrl'，函数（$范围）{ $ scope.operations = []; $ scope.operation = []; $ scope.operation = [{
标题：Operación170794，
持续时间：'3600'，
状态：0
}，{
标题：Operación981922，
持续时间：'60'，
状态：0
}];}）;
您不能有2个东西指向同一个阵列，并有不同的输出。 JavaScript对象是用引用和数组是一个对象。因此，无论你的名单是从同一阵列读取。如果添加一键操作，每一个对象，并推到，它将不断名单分开。
您想添加一个按键操作你的操作对象，像这样：
angular.module（'ionicApp'，[]）.controller（'mainCtrl'，函数（$范围）{
$ scope.operation = [{
标题：Operación170794，
持续时间：'3600'，
状态：0，
操作：[]
}，{
标题：Operación981922，
持续时间：'60'，
状态：0，
操作：[]
}];}）;
然后更改您的循环，像这样：
＆LT; DIV CLASS =面板体NG重复=运运行轨道由$指数＆GT;
＆所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}＆下; / P＆GT;
＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT;
＆LT; DIV＆GT;
＆LT; DIV NG重复=操作op.operations轨道由$指数＆GT; ＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT; ＆LT; / DIV＆GT;
＆LT;按钮NG点击=op.operations.push（{}）＆gt;添加多一个＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
您还可以添加一个索引你推到运营和过滤器通过与每个操作NG-IF：
＆LT; DIV CLASS =面板体NG重复=运运行轨道由$指数＆GT;
＆所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}＆下; / P＆GT;
＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT;
＆LT; DIV＆GT;
＆LT; DIV NG重复=操作操作跟踪由$指数NG-IF =operation._index === $指数＆GT; ＆LT;输入NG模型=operation.detailText类型=文本＆GT;＆LT; /输入＆GT; ＆LT; / DIV＆GT;
＆LT;按钮NG点击=addOperation（$指数）＆gt;添加多一个＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;angular.module（'ionicApp'，[]）.controller（'mainCtrl'，函数（$范围）{
$ scope.operations = []; $ scope.operation = [{
标题：Operación170794，
持续时间：'3600'，
状态：0
}，{
标题：Operación981922，
持续时间：'60'，
状态：0
}]; $ scope.addOperation =功能（指数）{
$ scope.operations.push（{
_index：指数
}）;
};
}）;
I am adding inputs dynamically by pressing an add button
here is a JSBin example so you can check my issue.
Everytime I press the button I mentioned, a new input should comes up, as you can see I have in the same view 2 forms/boxes there generated by a ng-repeat with separate inputs and a separate add more button, the issue is that when I play that button, 2 new inputs comes up in the 2 different forms I have, that shouldn't be happening, the new input must be add it only in the current form.
<div>
<div ng-repeat="op in operation track by $index">
<p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
<input ng-model="operation.detailText" type="text"></input>
<div>
<div ng-repeat="operation in operations track by $index">
<input ng-model="operation.detailText" type="text"></input>
</div>
<button ng-click="operations.push({})">Add one more</button>
</div>
</div>
</div>
JS:
angular.module('ionicApp',[])
.controller('mainCtrl', function($scope) {
$scope.operations = [];
$scope.operation = [];
$scope.operation = [{
title : 'Operación 170794',
duration : '3600',
status : '0'
}, {
title : 'Operación 981922',
duration : '60',
status : '0'
}];
});
You can't have 2 things point to the same array and have a different output. JavaScript objects are by reference and an array is an object. So both of your lists were reading from the same array. If you add a key operations to each of the objects and push to that it will keep the lists separate.
You want to add a key operations to your operation objects like so:
angular.module('ionicApp',[])
.controller('mainCtrl', function($scope) {
$scope.operation = [{
title : 'Operación 170794',
duration : '3600',
status : '0',
operations: []
}, {
title : 'Operación 981922',
duration : '60',
status : '0',
operations: []
}];
});
Then change your loops like so:
<div class="panel-body" ng-repeat="op in operation track by $index">
<p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
<input ng-model="operation.detailText" type="text"></input>
<div>
<div ng-repeat="operation in op.operations track by $index">
<input ng-model="operation.detailText" type="text"></input>
</div>
<button ng-click="op.operations.push({})">Add one more</button>
</div>
</div>
You can also add an index to each operation you push to operations and filter by it with ng-if:
<div class="panel-body" ng-repeat="op in operation track by $index">
<p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
<input ng-model="operation.detailText" type="text"></input>
<div>
<div ng-repeat="operation in operations track by $index" ng-if="operation._index === $index">
<input ng-model="operation.detailText" type="text"></input>
</div>
<button ng-click="addOperation($index)">Add one more</button>
</div>
</div>
angular.module('ionicApp',[])
.controller('mainCtrl', function($scope) {
$scope.operations = [];
$scope.operation = [{
title : 'Operación 170794',
duration : '3600',
status : '0'
}, {
title : 'Operación 981922',
duration : '60',
status : '0'
}];
$scope.addOperation = function(index){
$scope.operations.push({
_index: index
});
};
});
这篇关于避免在NG-模型角度重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
