Użyj pól wyboru w angularjs, aby zarządzać tablicą obiektów.

Question

Zadałem pytanie dotyczące How to associate objects as models using ng-options in angularjs.

I otrzymałem niesamowitą odpowiedź bardzo szybko. Moje pytania uzupełniające są następujące: odpowiedź używa <select mutiple> do obsługi tablicy obiektów potomnych.

można zobaczyć przykładowe roboczą, co chcę, współpracując z <select> na http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

Jak mogę używać <input type='checkbox'> (zamiast <select>) do obsługi tego obiektu tablicę tj ng:model="shirt.colors" Podczas powtarzania przedmiotów z colors obiektu tablicy.

Powodem, wydaje mi się to tak skomplikowane, że muszę zarządzać tablicą obiektów zamiast tablic wartości ... na przykład, jeśli patrzysz na skrzypce, są obiekty color i obiekt shirt, który ma wiele kolorów.

Jeśli obiekt color ulegnie zmianie, powinien zmienić odpowiednie obiekty w obiektach shirt.

Z góry dziękuję.

Answer 1

Potrzebujesz tylko wartości pośredniej w swoim zasięgu i zaznacz pola wyboru. W swoim kontrolerze - uważaj na zmiany i ręcznie zrekonstruuj shirt.colors, zgodnie z jego wartością.

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

A w kontrolerze:

$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); 

Można przetestować go tutaj: http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview