AngularJS多重选择模型数据绑定

Question

我正在使用AngularJS v1.2.0-rc.3。

我有一个模型y与模型x有1到许多的关系。

最初，我有一个模型y的表单，其中有一个xs的多项选择，类似这样：

控制器：

function test($scope) {
  $scope.xs = [
    {id:1, value:'value 1'},
    {id:2, value:'value 2'},
    {id:3, value:'value 3'}
  ];
  $scope.y = {xs:[2]};
}
查看：

<div ng-controller="test">
  <select multiple ng-model="y.xs" ng-options="x.id as x.value for x in xs">
  </select>    
</div>
结果是所选项目的数组。 

http://plnkr.co/edit/s3tvvHeyE17TVH5KNkPZ

很好，但是我需要将其更改为复选框列表，发现我无法使用数组了。

我尝试使用中继器的索引，如下所示：

<div ng-repeat="x in xs">
  <input type="checkbox" ng-model="y.xs[$index]" ng-true-value="{{x.id}}"/>
  {{x.value}}
</div>
例如，但是要预先选择第二项，我需要使用它：

$scope.y = {xs: [null, '2']};
这没用。 

http://plnkr.co/edit/9UfbKF2gFLnhTOKu3Yep

经过一些搜索之后，似乎推荐的方法是使用对象哈希，就像这样

<div ng-repeat="x in xs">
  <input type="checkbox" ng-model="y.xs[x.id]"/>
  {{x.value}}
</div>
http://plnkr.co/edit/Xek8alEJbwq3g0NAPMcF

但是如果取消选择项目，您将得到如下所示的内容：

y={
  "xs": {
    "1": false,
    "2": false,
    "3": false
  }
}
所以我最终添加了一个监视表达式来过滤掉错误的值，像这样：

$scope.$watch('y.xs', function(n) {
  for (var k in n) 
    if (n.hasOwnProperty(k) && !n[k]) 
      delete n[k];
}, true);
http://plnkr.co/edit/S1C1g5fYKzUZb7b0pRtp

它可以工作，但感觉不令人满意。

由于这是一个非常常见的用例，所以我想知道其他人如何解决它。

更新

根据建议使用自定义指令，我想出了一种将选择内容保留为列表的解决方案。

指令：

angular.module('checkbox', [])
.directive('checkboxList', function () {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      selection: '=',
      items: '=',
      value: '@',
      label: '@'
    },
    template: '<div ng-repeat="item in list">' +
      '<label>' +
      '<input type="checkbox" value="{{item.value}}" ng-checked="item.checked" ng-click="toggle($index)"/>' +
      '{{item.label}}' +
      '</label>' +
      '</div>',
    controller: ['$scope', function ($scope) {
      $scope.toggle = function (index) {
        var item = $scope.list[index],
          i = $scope.selection.indexOf(item.value);
        item.checked = !item.checked;
        if (!item.checked && i > -1) {
          $scope.selection.splice(i, 1);
        } else if (item.checked && i < 0) {
          $scope.selection.push(item.value);
        }
      };
      $scope.$watch('items', function (value) {
        $scope.list = [];
        if (angular.isArray(value)) {
          angular.forEach(value, function (item) {
            $scope.list.push({
              value: item[$scope.value],
              label: item[$scope.label],
              checked: $scope.selection.indexOf(item[$scope.value]) > -1
            });
          });
        }
      }, true);
    }]
  };
});
查看：

<div checkbox-list
     selection="a.bs"
     items="bs"
     value="id"
     label="name">
</div>
http://plnkr.co/edit/m7yH9bMPuRCg5OP2u0VX

我正在使用AngularJS v1.2.0-rc.3。我的模型y与模型x的一对多关系。最初，我有一个模型y的表单，其中有一个xs的多重选择项，如下所示：Controller：...

Answer 1

过去我不得不自己编写一个多选择指令，请随时在http://isteven.github.io/angular-multi-select处使用它。

Answer 2

我采用了指示性方法。它给我留下了被检查对象的ID列表。这是它的小提琴JSFIDDLE。这就是我的html的样子。

Answer 3

我需要一个复选框解决方案，该解决方案还应显示不在可能选项列表中的值（自用户填写表格以来，该列表是否发生了变化？）。>>

而且，我也不认为需要监视功能。

Answer 4

我需要相同的功能，但我想拥有一个复选框，该复选框可以选择所有复选框，如果我想切换一个复选框，则记录的ID为>]