Question

我是javascript和AngularJS的新手。我有点难以理解为什么我无法编辑数组中的元素。

foll是JSON结构：

 [
    {
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]

},

{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]

}
  ];

foll是the plunker： plunker

每当我点击时，“编辑”按钮就会出现一个想法，我希望文本显示在相应的文本框中，然后当我点击“保存编辑”时，编辑显示在列表中。

我想我已经把它全部搞砸了我的edit（）方法，而且我无论如何都无法绕过它。任何帮助都会受到赞赏。

Answer 1

我分叉了Plunker并进行了一些改进，使代码更具可读性，特别是使编辑状态更加透明，并在不处于编辑模式时隐藏编辑控件。

主要问题是：

不清楚管理编辑状态。
未引用外部ng-repeat $ parent中的正确索引。$ index是必需的。

希望它有所帮助。

Plunker Here以下代码：

<强> view.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]
    }
  }


});

Answer 2

您的方案中嵌套了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作为附加参数传递并相应地使用它。

Answer 3

尝试使用SortMemberPath="Type"变量在每次迭代中存储状态

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 = '';
  }
});

Answer 4

你的理解很好。

您的问题是，您需要将分类索引和虽然索引传递给您孩子edit中的ng-repeat函数。

<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;

  }

Answer 5

工作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
 }


});

无法将数组中的元素映射到AngularJS中的输入框

5 个答案: