javascript - AngularJS:如何以表格形式每行表示和保存一个对象

Question

我需要一个 departments 表格，其中部门数量有限，日期可用。在所有这些部门中，有些部门需要分配给学生，一旦完成，就需要提交表格。提交时，表中的每一行都需要添加到 assignedDepartments 集合中。

以下是我如何需要 assignedDepartments 集合来查看是否已分配两个部门:

var assignedDepartments= [
    { "name": "Rohit", "age": 24, "department": "Computer Science", "isAssigned": true}, 
    { "name": "Matt", "age": 23, "department": "Engineering Physics", "isAssigned": true},
    { "name": "Rubi", "age": 32, "department": "Humanity", "isAssigned": false}
]

departments 集合可用，我使用它通过 ng-repeat 进行迭代:

<form name="assignedDepartmentsForm">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>
             Name
        </th>
        <th>
             Age
        </th>
        <th>
             Department
        </th>
      </tr>
     </thead>
    <tbody>
      <tr ng-repeat="department in departments">
        <td>
              <input  type="text" ng-model="name" />
        </td>
        <td>
             <input  type="number" ng-model="age" />
        </td>
        <td>
            {{ department}}
        </td>
        <td>
            <input type="checkbox" ng-model="isAssigned" />
        </td>
      </tr>
    </tbody>
  </table>
<form>

谁能帮我为departments 创建一个表格表单，其中每一行都被表示并保存为表单提交时的一个对象。

Answer 1

将字符串数组转换为对象数组(如下所示)。然后，您可以更轻松地向对象添加更多字段。

[
  {"department":'Computer Science'},
  {"department":'Engineering Physics'},
  {"department":'Humanity'}
]

您现在仍然可以使用 html 代码。你只需要调整你的 Controller 。

function formCtrl($scope) {
  $scope.departments = angular.copy(data2);
  $scope.submit = function() {
  $scope.assignedDepartments = [];
     angular.forEach($scope.departments, function(d) {
        if (d.isAssigned) {
           $scope.assignedDepartments.push(d);
        }
     })
  }
  $scope.assignedDepartments = [];
}

这是一个代码示例:http://jsbin.com/pegonisale/1/edit?html,js,output