AngularJS不保留表單中復選框列表中的選定項目

Question

我想從復選框列表中保存選定項目的列表，該列表是使用以下角度服務生成的。

不幸的是，我的“作業”對象僅保留最后一個選定復選框的狀態，而不是列表中所有選定復選框的ID值。

誰能告訴我我在做什么錯？

完整示例的說明： 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>

Answer 1

當前，將完全相同的模型（job.selectedPeople）分配給每一行，並且復選框的狀態會在每次單擊時添加到selectedPeople的末尾。 這意味着selectedPeople充當所有點擊的歷史記錄，而不是當前狀態的記錄。

您可以使用$ index指定重復中的每一行都以其自己的數組元素為模型：

ng-model="selectedPeople[$index]"

然后可以刪除它，因為該數組將通過數據綁定自動更新：

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

更普遍地說，我認為將工作和人員更清楚地分開將是有幫助的，但希望以上內容會有所幫助。

Answer 2

這是一個正在運行的代碼，您的主要錯誤是對每個輸入使用ng-model，這是可以放在form元素上的控制器作用域。

我使用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