我是JavaScript和AngularJS的新手。我在理解爲什麼無法編輯數組中的元素時遇到了一些困難。無法將數組中的元素映射到AngularJS中的輸入框中
的FOLL是JSON結構：
[
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
的FOLL是plunker： plunker
每當我點擊，AGST思想的 '編輯' 按鈕，我希望文字顯示相應的文本框，然後當我點擊「保存編輯」時，編輯shld顯示在列表中。
我想我已經把所有的東西搞亂了，我的edit（）方法，我無法把頭繞在它周圍。任何幫助將不勝感激。
你在你的場景中嵌套了ng-repeats。在這種情況下，你必須小心使用$ index。我建議使用下面的語法
ng-repeat = (key,value) in data
因此，在你的情況下，使用以下命令：
<div ng-repeat="(cIndex, classified) in classifieds">
...
<li ng-repeat="(tIndex, thought) in classified.thoughts">
你也將不得不改變你如何初始化$ scope.input模型。使用與分類數相同數量的條目初始化它（angular將不會自動爲您添加數組元素）。您可以在腳本文件中執行此操作。
另外在你的編輯功能中，你正在使用classified.thought。這是不正確的，因爲對分類對象沒有思想特性（而是思想）。我想你想訪問與列表項目相關的當前想法。爲此，您可以另外傳入思想或tIndex作爲附加參數並相應地使用它。
你的理解很好。
您的問題在於您需要將分類索引和通過索引都傳遞到您的子ng-repeat中的edit函數。
<li ng-repeat="thought in classified.thoughts">
{{ thought }}
<button ng-click="remove(classified, $index)">Remove</button>
<button ng-click="edit(classified, $index, classifides.indexOf(classified))">Edit</button>
</li>
這樣的功能，瞭解你的分類的兩個指標，並在它的思想。這樣改變功能。
$scope.edit = function(classified, i, classifiedIndex) {
$scope.editing = true;
$scope.input[classifiedIndex] = classified.thoughts[i];
$scope.editing = false;
}
我分叉的Plunker和做了一些改進，以使代碼的可讀性，特別是使編輯狀態更透明和隱藏編輯控制時不處於編輯模式。
的主要問題是：
希望它有幫助。
Plunker Here下面的代碼：
視圖。HTML
<body ng-controller="demoController">
editing {{editing}}
<div ng-repeat="classified in classifieds">
<h1>{{classified.name }}</h1>
<ul>
<li ng-repeat="thought in classified.thoughts">
{{ thought }} <button ng-click="remove(classified, $index)">Remove</button><button ng-click="edit($parent.$index, $index)">Edit</button>
</li>
</ul>
<div ng-show="editing[$index].editing">
<input type="text" ng-model="editing[$index].thought">
<button type="submit" ng-click="save($index)">Save</button>
</div>
</div>
Controller.js
// Code goes here
var app = angular.module('app', []);
app.controller('demoController', function($scope) {
$scope.input = [];
$scope.editing = {};
$scope.classifieds = [
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
/* Add */
$scope.save = function(classifiedIndex) {
var editingMeta = $scope.editing[classifiedIndex];
var thoughtIndex = editingMeta.thoughtIndex;
$scope.classifieds[classifiedIndex].thoughts[thoughtIndex] = editingMeta.thought;
delete $scope.editing[classifiedIndex];
}
/* Remove*/
$scope.remove = function(classified, i) {
$scope.classified.thoughts.splice(i, 1);
}
/* Edit */
$scope.edit = function(classifiedIndex, thoughtIndex) {
var classified = $scope.classifieds[classifiedIndex];
$scope.editing[classifiedIndex] = {
editing: true,
thoughtIndex: thoughtIndex,
thought: classified.thoughts[thoughtIndex]
}
}
});
與editor可變嘗試將狀態存儲在每個迭代
var app = angular.module('my-app', [], function() {})
app.controller('demoController', function($scope) {
$scope.input = [];
$scope.classifieds = [{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}, {
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}];
/* Add */
$scope.save = function(classified, editor) {
classified.thoughts.push(editor.input);
editor.input = '';
}
/* Remove*/
$scope.remove = function(classified, i) {
classified.thoughts.splice(i, 1);
}
/* Edit */
$scope.edit = function(classified, index, editor) {
editor.input = classified.thoughts[index];
editor.index = index;
}
$scope.saveEdit = function(classified, editor) {
classified.thoughts[editor.index] = editor.input;
editor.index = -1;
editor.input = '';
}
});<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="my-app">
<div ng-controller="demoController">
<div ng-repeat="classified in classifieds">
<h1>{{classified.name }}</h1>
<ul>
<li ng-repeat="thought in classified.thoughts">
{{ thought }}
<button ng-click="remove(classified, $index)">Remove</button>
<button ng-click="edit(classified, $index, editor)">Edit</button>
</li>
</ul>
<input ng-init="editor={index:-1}" type="text" ng-model="editor.input">
<button type="submit" ng-if="editor.index==-1" ng-click="save(classified, editor)">Save</button>
<button type="submit" ng-if="editor.index>-1" ng-click="saveEdit(classified, editor)">Save Edit</button>
</div>
</div>
</div>工作Plunkr在這裏。 https://plnkr.co/edit/l4CPe2JJ0U6JJ1YdooyV?p=preview
var app = angular.module('app', []);
app.controller('demoController', function($scope) {
$scope.input = [];
$scope.classifieds = [
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
$scope.thoutEditIndex = null;
/* Add */
$scope.save = function(key, index) {
console.log(key)
console.log(index)
$scope.classifieds[key].thoughts[$scope.thoutEditIndex] = $scope.input[key];
$scope.input[key] = '';
$scope.thoutEditIndex = null;
}
/* Remove*/
$scope.remove = function(classified, i) {
classified.thoughts.splice(i, 1);
$scope.thoutEditIndex = null;
}
/* Edit */
$scope.edit = function(classified, key, index) {
$scope.editing = true;
console.log(classified)
$scope.input[key] = classified.thoughts[index];
$scope.editing = false;
$scope.thoutEditIndex = index
}
});