你好：我在AngularJS中弄溼我的腳。 我想添加和刪除數組中的元素;但是，我無法達到預期的效果。無法在AngularJS中添加或刪除陣列中的元素
的FOLL是JSON結構：
$scope.masters = [
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
的FOLL是plunker。
任何輸入不勝感激。謝謝。
由於@Mathew建議刪除的思想大師的索引，你應該引入$index的用法：這樣的事情應該在remove函數工作如下：
JS代碼：
$scope.input = [];
$scope.add = function(i) { // receiving index as param
$scope.masters[i].thoughts.push($scope.input[i]);
$scope.input[i] = '';
};
HTML代碼：
<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>
好吧..所以需要使用索引來處理嵌套數組。現在我似乎應用類似的邏輯刪除了一個想法，但它似乎沒有工作..我可能在這裏失蹤。 '$ scope.remove = function（i）{scope} masters [i] .thoughts [i] .splice（index，1）; };' – Nosail
啊..我得到了錯誤的觀點。它現在可以運行'$ scope.remove = function（master，i）{} {master.thoughts.splice（i，1）; };'謝謝Leo，我會通過你的代碼逐行嘗試並吸收使用數組的概念。我已經提出了你的答案，但它沒有反映，因爲我沒有足夠的分數。 – Nosail
這是您的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>
請注意，我是如何將當前主作爲參數包含在remove函數中的。這確保了由於JavaScript數組通過引用傳遞而正確的主拼接。以下是更新後的角度控制器。
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);
};
}]);
的附加功能似乎並沒有被採摘從輸入模型中的價值，但後來應該是具有約束力的問題，而不是不工作，因爲它應該的功能。
我希望這有助於。
非常感謝你羚牛的時間來幫助我與他的。我會一行一行地檢查你的代碼，試圖吸收使用數組的概念。非常感謝。我已經提出了你的答案，但它沒有反映，因爲我沒有足夠的分數。 – Nosail
不客氣 –
問題是你需要傳遞給添加和刪除函數的主人的索引。因爲你這樣做：
$scope.masters.thoughts.splice(index, 1);
但主人是一個數組，因此，你需要選擇陣列內的一個對象，例如
$scope.remove = function(masterIndex, thoughtsIndex) {
$scope.masters[masterIndex].thoughts.splice(thoughtsIndex, 1);
};
對於這個在你的HTML工作，你必須使用內部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>
在Add函數中，您必須執行相同操作來重新設置master數組的$ index。
@Matthew你是指這樣的sthg;雖然它不工作：'$ scope.add = function（）{ $ scope.masters.thoughts [$ index] .push（$ scope.input）; $ scope.input =''; };' – Nosail