AngularJS没有将复选框列表中的选定项目保留在表单中答案

【问题标题】：AngularJS not keeping selected items from checkbox list in a formAngularJS没有将复选框列表中的选定项目保留在表单中
【发布时间】：2015-01-14 18:11:09
【问题描述】：

我想从复选框列表中保存所选项目的列表，该列表由 Angular 服务生成，如下所示。

不幸的是，我的“作业”对象只保留最后一个选中复选框的状态，而不是列表中所有选中复选框的 id 值。

谁能告诉我我做错了什么？

Plunker 与整个示例：http://plnkr.co/edit/znLy9EqUMZN6kRzNnl07?p=preview

<script type="text/javascript">
var app = angular.module('helloWorldApp', []);

app.service('HelloWorldService', function() {
  var model = this;
  var people = [{
    "id": 0,
    "firstName": "John",
    "lastName": "Doe",
    "expertise": "Programmer",
    "checked": false
  }, {
    "id": 1,
    "firstName": "Mary",
    "lastName": "Jane",
    "expertise": "Manager",
    "checked": false
  }];

  model.getPeople = function() {
    return people;
  };
});

app.controller('HelloWorldController', ['$scope', 'HelloWorldService',
  function($scope, HelloWorldService) {
    var helloWorld = this;
    // why this does not work?
    // helloWorld.people = function() { return HelloWorldService.getPeople(); };
    // why this one works?
    helloWorld.people = HelloWorldService.getPeople();
    $scope.selectedPeople = [];
    helloWorld.selectedPeople = [];

    $scope.createNewJob = function() {
      console.log("Object: " + JSON.stringify($scope.job));
    };

    $scope.addPerson = function(id) {
      // how can I keep a list of selected people in my ng-model object?
      //helloWorld.selectedPeople.push(id + " selected");
      $scope.selectedPeople.push(id + " selected");
      helloWorld.selectedPeople = $scope.selectedPeople;
      console.log($scope.selectedPeople);
    }
  }
]);

  <tbody ng-controller="HelloWorldController as helloWorld">
    <tr ng-repeat="person in helloWorld.people">
      <td>
        <input type="checkbox" name="peopleList[]" ng-model="job.selectedPeople" ng-click="addPerson(person.id)" value="{{person.id}}" />
        <label>{{person.firstName}} {{person.lastName}}</label>
      </td>
      <td>
        {{person.expertise}}
      </td>
    </tr>
  </tbody>

【问题讨论】：

我按照stackoverflow.com/questions/14514461/…的例子编写了这个代码

标签： javascript angularjs checkbox

【解决方案1】：

目前，完全相同的模型 (job.selectedPeople) 分配给每一行，并且复选框的状态在每次单击时添加到 selectedPeople 的末尾。这意味着 selectedPeople 是所有点击的历史记录，而不是当前状态的记录。

您可以使用 $index 指定重复中的每一行都基于其自己的数组元素建模：

ng-model="selectedPeople[$index]"

然后您可以删除它，因为该数组将通过数据绑定自动更新：

$scope.selectedPeople.push(id + " selected");
helloWorld.selectedPeople = $scope.selectedPeople;

更一般地说，我认为更明确地区分工作和人员会有所帮助，但希望以上内容会有所帮助。

【讨论】：

您能否详细说明工作/人的哪些方面会更好？我的意图是创建一个“新招聘广告”页面，我在其中选择人员申请该工作。因此，我试图将选定的值绑定到“工作”模型，而我需要从“人员”服务中获取有关人员的信息。
也许您可以拥有一个“专业知识”数组，这样在创建工作时您不必选择特定的人员，只需选择您正在寻找的专业知识。从该专业知识数组中，您可以构建选择器来创建工作和人员，并使用它为每个人创建一个简单的过滤器。

【解决方案2】：

这是一个正在运行的代码，您的主要错误是为每个输入使用 ng-model，并且您可以将控制器范围放在表单元素上。

我使用ng-checked 指令来定义复选框是否必须被选中。

  $scope.isChecked = function (id) {
     return $scope.selectedPeople.indexOf(id) > -1;
  }

和html

<input type="checkbox" name="peopleList[]" ng-checked="isChecked(person.id)" ng-click="addPerson(person.id)" />

这是代码，希望对你有帮助。

http://plnkr.co/edit/jE5fmAGd73c1nGaF5g0C?p=preview

【讨论】：