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.
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
$scope.remove = function(i) { $scope.masters[i].thoughts[i].splice(index, 1); };$scope.remove = function(master, i) { master.thoughts.splice(i, 1); }; and thanks Leo, im goin thru your code line by line to try and absorb the concept of working with arrays. i have upvoted your answer, but its not gettin reflected as i dont have sufficient points.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
$scope.remove = function(index) { var index = $scope.masters.indexOf(master); $scope.masters[masterIndex].thought.splice(index, 1); };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.
This is an updated version of your plnkr.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" 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.
$scope.add = function() { $scope.masters.thoughts[$index].push($scope.input); $scope.input = ''; };