编辑 ng-repeat 对象

Question

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

我有以下起始数组。

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;

我为两个选定的对象添加了一个新的“等级”属性，并使用 ng-repeat 绑定到一个表。 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 不会保留这些值。我的目标是为两个新的学生对象添加成绩，然后将它们发布回服务器。

一个正常工作的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"。