Unable to add or remove elements from an array in AngularJS
Question
Hello: im gettin my feet wet in AngularJS. I am trying to add and remove elements in an array; however, im unable to accomplish the desired effect.
the foll is the JSON structure:
$scope.masters = [
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
the foll is the plunker.
any input is greatly appreciated. thank you.
4 answers
solution1
2 2016-03-29 17:14:38
As @Mathew suggested, you should introduce the usage of $index as follows:
JS code:
$scope.input = [];
$scope.add = function(i) { // receiving index as param
$scope.masters[i].thoughts.push($scope.input[i]);
$scope.input[i] = '';
};
HTML code:
<div ng-repeat="master in masters">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts">
{{ thought }} <button ng-click="remove($index)">Remove</button>
</li>
</ul>
<input type="text" ng-model="input[$index]">
<button type="submit" ng-click="add($index)">Add</button>
</div>
See this Plunker working example
solution2
0 2016-03-29 17:04:11
You need to specify the index of masters. Something like this should work in the remove function:
$scope.masters[masterIndex].thoughts.splice(index, 1);
where masterIndex is the index of the master that you want to remove a thought from
solution3
0 2016-03-29 17:19:13
This is an updated version of your plnkr.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="demoController">
<div ng-repeat="master in masters track by $index">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts track by $index">
{{ thought }} <button ng-click="remove(master, $index)">Remove</button>
</li>
</ul>
<input type="text" ng-model="input[$index]">
<button type="submit" ng-click="add($index)">Add</button>
</div>
</body>
</html>
Notice how I included the current master as an argument to the remove function. This ensures that the correct master is spliced since JavaScript arrays are passed by reference. Below is the updated angular controller.
var app = angular.module('app', []);
app.controller('demoController', ['$scope', function ($scope) {
$scope.input = [];
$scope.masters = [ {
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}, {
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}];
$scope.add = function(index) {
$scope.masters[index].thoughts.push($scope.input[index]);
$scope.input[index] = '';
};
$scope.remove = function(master, index) {
master.thoughts.splice(index, 1);
};
}]);
The add function seems not to be picking the value from the input model, but then that should be a binding issue, not the function not working as it should.
I hope this helps.
solution4
0 2016-03-29 17:20:04
the problem is that you need pass to the add and remove functions the index of the masters. Because you do this:
$scope.masters.thoughts.splice(index, 1);
But masters is an Array, therefore you need to select one object inside that Array, for example
$scope.remove = function(masterIndex, thoughtsIndex) {
$scope.masters[masterIndex].thoughts.splice(thoughtsIndex, 1);
};
For this to work in your HTML you have to use the parent index inside the inner ng-repeat
<div ng-repeat="master in masters">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts">
{{ thought }}
<button ng-click="remove($patent.index, $index)">
Remove
</button>
</li>
</ul>
<input type="text" ng-model="input">
<button type="submit" ng-click="add($index)">Add</button>
</div>
In the Add function you must do the same to recibe the $index of the masters array.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.