AngularJS多选模型数据绑定

我有一个模型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