Использовать флажки в angularjs для управления массивом объектов

Я задал вопрос о Как ассоциировать объекты как модели с помощью ng-options в angularjs.

И у меня очень быстрый ответ. Мои последующие вопросы состоят в том, что в ответе используется <select mutiple> для обработки массива дочерних объектов.

Вы можете увидеть рабочий пример того, что я хочу, работая с <select> в http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

Как я могу использовать <input type='checkbox'> (вместо <select>) для обработки этого массива объектов, т.е. ng:model="shirt.colors", повторяя элементы из массива объектов colors.

Причина, мне кажется настолько сложной, что мне приходится управлять массивом объектов, а не массивом значений... например, если вы посмотрите на скрипку, есть объекты color и shirt объект, который имеет несколько цветов.

Если объект color изменяется, он должен изменить соответствующие объекты color в объектах shirt.

Спасибо заранее.

ОТВЕТЫ

Ответ 1

Вам просто нужно какое-то промежуточное значение в своей области и привязать к нему флажки. В вашем контроллере - следите за тем, чтобы он менялся, и вручную восстанавливайте shirt.colors, в соответствии с этим значением.

<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>

И в вашем контроллере:

$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