anglejsのチェックボックスを使ってオブジェクトの配列を管理する

Question

私は約 How to associate objects as models using ng-options in angularjsという質問をしました。

私は非常に速い答えを得ました。私の追随する質問は、応答が<select mutiple>を使用して子オブジェクト配列を処理することです。

あなたはどのように私はcolorsオブジェクト配列から項目を繰り返しながら、すなわちng:model="shirt.colors"そのオブジェクトの配列を処理するために（代わりに<select>の）<input type='checkbox'>を使用することができますhttp://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

で<select>と協力して、私が何をしたいの作業例を見ることができます。

なぜなら、これは私にとって非常に複雑です。値の配列ではなく配列の配列を管理する必要があるということです。たとえば、フィドルを見ると、colorオブジェクトとshirtオブジェクトがあります。複数の色。

colorオブジェクトが変更された場合は、対応するcolorオブジェクトをshirtオブジェクトに変更する必要があります。

ありがとうございます。

Answer 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