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

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

javascript angularjs

Javascript 无法将数组中的元素映射到AngularJS中的输入框,javascript,angularjs,Javascript,Angularjs,我不熟悉javascript和AngularJS。我很难理解为什么我不能编辑数组中的元素 foll是JSON结构： [ { "name": "Wittgenstein", "thoughts": ["thought 1", "thought 2", "thought 3"] }, { "name": "King", "thoughts": ["thought 1", "thought 2", "thought 3"] } ]; 福勒是一个劫掠者：每当我单击“编辑”按钮时

我不熟悉javascript和AngularJS。我很难理解为什么我不能编辑数组中的元素

foll是JSON结构：

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

},

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

}
  ];

福勒是一个劫掠者：

每当我单击“编辑”按钮时，我都会想，我希望文本显示在相应的文本框中，然后当我单击“保存编辑”时，编辑按钮会显示在列表中

我想我的edit（）方法把一切都搞糟了，不知怎么的，我无法控制住它。任何帮助都将不胜感激。

您的场景中嵌套了ng重复。在这种情况下，必须小心使用$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.think。这是不对的，因为分类对象上没有思想属性（而是思想）。我认为您希望访问与列表项关联的当前想法。为此，您还可以将think或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>

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

主要问题是：

未明确管理编辑状态
未引用外部ng repeat$parent中的正确索引。需要$index

希望能有帮助

代码如下：

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>

尝试使用

编辑器

变量在每次迭代中存储状态

var-app=angular.module（'my-app'，[]，function（）{}）
app.controller（'demoController'，函数（$scope）{
$scope.input=[]；
$scope.classifieds=[{
“名称”：“维特根斯坦”，
“思想”：[“思想1”、“思想2”、“思想3”]
}, {
“姓名”：“国王”，
“思想”：[“思想1”、“思想2”、“思想3”]
}];
/*加*/
$scope.save=函数（已分类，编辑器）{
分类。思想。推送（编辑。输入）；
editor.input=''；
}
/*除去*/
$scope.remove=功能（已分类，i）{
分类。思想。拼接（i，1）；
}
/*编辑*/
$scope.edit=函数（分类、索引、编辑器）{
editor.input=classified.thinks[index]；
editor.index=索引；
}
$scope.saveEdit=函数（已分类，编辑器）{
classified.thinks[editor.index]=editor.input；
editor.index=-1；
editor.input=''；
}
});

{{classified.name}}


{{思考}
去除
编辑


拯救
保存编辑
工作区在这里
<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>

// 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]
    }
  }


});

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
 }


});