我动态添加输入由pressing一个添加按钮
是JSBin例如的,所以你可以检查我的问题。
每次我preSS我提到的按钮,一个新的输入应该出现,因为你可以看到我有同样的看法2表格/盒由 NG-重复带独立输入和一个单独的
添加多个
按钮,问题是,当我播放按钮,2个新的投入在2个不同形式的我来了,这不应该发生,新的输入必须只能在当前的形式添加。
< DIV> < DIV NG重复=运运行轨道由$指数> &所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}&下; / P> <输入NG模型=operation.detailText类型=文本>< /输入> < DIV> < DIV NG重复=操作操作跟踪由$指数> <输入NG模型=operation.detailText类型=文本>< /输入> < / DIV> <按钮NG点击=operations.push({})>添加多一个< /按钮> < / DIV> < / DIV> < / DIV>
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, 操作:[] }];});
然后更改您的循环,像这样:
< DIV CLASS =面板体NG重复=运运行轨道由$指数> &所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}&下; / P> <输入NG模型=operation.detailText类型=文本>< /输入> < DIV> < DIV NG重复=操作op.operations轨道由$指数> <输入NG模型=operation.detailText类型=文本>< /输入> < / DIV> <按钮NG点击=op.operations.push({})>添加多一个< /按钮> < / DIV> < / DIV>
您还可以添加一个索引你推到运营和过滤器通过与每个操作NG-IF:
< DIV CLASS =面板体NG重复=运运行轨道由$指数> &所述p为H.; {{op.title}} | {{op.duration}} | {{op.status}}&下; / P> <输入NG模型=operation.detailText类型=文本>< /输入> < DIV> < DIV NG重复=操作操作跟踪由$指数NG-IF =operation._index === $指数> <输入NG模型=operation.detailText类型=文本>< /输入> < / DIV> <按钮NG点击=addOperation($指数)>添加多一个< /按钮> < / DIV>< / DIV>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
});
};
});