编辑 ng-repeat 对象

Question

如何使用 ng-repeat 编辑绑定到 table 的对象数组？

我有以下起始数组。

var students = [{
  "FName": "Tom",
  "LName": "Wilcox"
}, {
  "FName": "Kevin",
  "LName": "Johnson"
}, {
  "FName": "Annebelle",
  "LName": "Smith"
}, {
  "FName": "Kelly",
  "LName": "Masters"
}, {
  "FName": "Phillip",
  "LName": "Smith"
}, ];

然后我将两个学生推入第二个数组并添加一个名为 "Grade" 的新属性，如下所示：

var testTakers = [];
var s;
for (s = 0; s < students.length; s++) {
  if (students[s].LName == "Smith") {
    students[s].Grade = "";       // New Grade Property
    testTakers.push(students[s]);
  }
}
$scope.TestTakers = testTakers;

我将新的 'Grade' 属性添加到两个选定的对象，并使用 ng-repeat 绑定到 table。 Grade' 属性绑定到文本框以进行编辑。

<table class="table-striped">
<tbody>
  <tr ng-repeat="student in TestTakers">
    <td class="col-md-2">{{student.FName}}</td>
    <td class="col-md-2">{{student.LName}}</td>
    <td class="col-md-2">
      <input type="text" size="2em" ng-bind="Grade" style="text-align:center" />
    </td>
  </tr>
</tbody>

当我在文本框中输入成绩时 Angular 没有保留这些值。我的目标是将成绩添加到两个新学生对象，然后 post 将它们备份到服务器。

这里有一个可用的 Plunker 示例。在此先感谢您对我的帮助！

Answer 1

您需要使用 ng-model 而不是 ng-bind 来设置用户在文本框和绑定视图模型上输入的双向绑定。

<input type="text" size="2em" ng-model="student.Grade"  class="text-center" />

Plnkr

旁注：由于您已经加载了 boostrap css，您可以只使用现有的 css 规则 text-center 而不是内联样式来指定 style="text-align:center".

编辑 ng-repeat 对象

Editing ng-repeat objects

html

javascript

angularjs

angularjs-directive

angularjs-ng-repeat