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;

我为两个选定的对象添加了一个新的“Grade”属性，并使用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"。

编辑ng-repeat对象

1 个答案: