angularjs - 使用 angularjs 中的复选框来管理对象数组

Question

我问了一个关于 How to associate objects as models using ng-options in angularjs .

我很快就得到了一个很棒的答案。我的后续问题是响应使用 <select mutiple>处理子对象数组。

您可以看到我想要的工作示例，使用<select>在http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

如何使用<input type='checkbox'> (而不是 <select> )来处理该对象数组，即 ng:model="shirt.colors"同时重复 colors 中的项目对象数组。

原因，这对我来说如此复杂，因为我必须管理对象数组而不是值数组...例如，如果你查看 fiddle ，有 color对象和shirt具有多种颜色的物体。

如果color对象改变时，应该改变相应的color shirt 中的对象对象。

提前谢谢您。

Answer 1

您只需要范围内的一些中间值，并将复选框绑定(bind)到它。在你的 Controller 中 - 观察它的变化，并根据它的值手动重建衬衫.颜色。

<div ng-repeat='shirt in shirts'>
  <h3>Shirt.</h3>
  <label>Size: <input ng-model='shirt.size'></label><br/>
  <label>Colors:</label>
  <label ng-repeat="color in colors">
    {{color.label}} <input ng-model="selection[$parent.$index][$index]" type="checkbox"/>
  </label>

    </label>
</div>

在你的 Controller 中:

$scope.selection = [[],[]];
$scope.$watch('selection', function () {
  console.log('change', $scope.selection);
  angular.forEach($scope.selection, function (shirtSelection, index) {
    $scope.shirts[index].colors = [];
    angular.forEach(shirtSelection, function (value, index2) {
      if (value) $scope.shirts[index].colors.push($scope.colors[index2]);
    });
  });
}, true);

您可以在这里测试:http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview