Avoid duplicate angular on ng model
I am adding inputs dynamically by clicking add button
here is a JSBin example so you can check my problem.
Every time I click the button I mentioned a new input appears, as you can see that I have in the same view 2 forms / fields created with ng-repeat
with separate inputs and a separate button the add more
problem is that when i play this button two new inputs appear in two different forms which i have, it shouldn't be, new input should only be added 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'
}];
});
source to share
You cannot have 2 things for the same array and have a different output. JavaScript objects are referencing and array is an object. This way both of your lists were reading from the same array. If you add key operations to each of the objects and click on that, they will contain the lists separately.
You want to add key operations for your work objects, for example:
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 this:
<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 for each operation you click on the operations and filter 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
});
};
});
source to share
Be clear in your code for the concepts you are using (like operations versus operation types) and don't mix them together. Avoid naming things too precisely, as this creates unnecessary confusion.
jsbin.com/hujerurivu/1/edit?html,css,js,output
angular.module('ionicApp',[]).controller('mainCtrl', function($scope) {
$scope.operationTypes = [{
title : 'Operaci贸n 170794',
duration : '3600',
status : '0'
}, {
title : 'Operaci贸n 981922',
duration : '60',
status : '0'
}];
$scope.operations = {};
angular.forEach($scope.operationTypes, function(operationType){
$scope.operations[operationType.title] = [];
});
});
-
<div class="panel panel-default">
<div class="panel-body" ng-repeat="operationType in operationTypes track by $index">
<p>{{operationType.title}} | {{operationType.duration}} | {{operationType.status}}</p>
<div>
<div ng-repeat="operation in operations[operationType.title] track by $index">
<input ng-model="operation.detailText" type="text"></input>
</div>
<button ng-click="operations[operationType.title].push({})">Add one more</button>
</div>
</div>
</div>
source to share