Wie können Sie andere Gruppen deaktivieren, wenn Sie eine Option einer Gruppe in md-select auswählen?

Question

Ich versuche, eine Dropdown-Liste

<md-select> 

und

<md-optgroup>. 

Ich bin nach dem Vorbild „Optionsgruppen“ hier mit zu implementieren: https://material.angularjs.org/latest/demo/select

Aber was zu implementieren ich will, ist ein bisschen komplex. Sobald der Benutzer eine Option unter einer Gruppe auswählt, sind alle Optionen in den anderen Gruppen grau (kann nicht ausgewählt werden). Nur die Optionen in derselben Gruppe sind weiterhin wählbar.

Zum Beispiel, wenn der Benutzer zuerst "Speck" für die Beläge wählt, dann sind nur noch "Pepperoni", "Wurst", "Hackfleisch" wählbar. Andere Optionen unter VEGGIES sind alle deaktiviert. Wenn der Benutzer "Bacon" nicht abwählt, werden alle Optionen unter VEGGIES wieder verfügbar.

Hat jemand eine Lösung dafür? Danke.

Answer 1

Sie können ein Element durch ng-deaktiviert deaktivieren. Sie sollten dies erreichen, indem Sie alle Elemente deaktivieren, die nicht die gleiche Kategorie wie die bereits ausgewählte haben.

$scope.toppings = [ 
    { category: 'meat', name: 'Pepperoni' }, 
    { category: 'meat', name: 'Sausage' }, 
    { category: 'meat', name: 'Ground Beef' }, 
    { category: 'meat', name: 'Bacon' }, 
    { category: 'veg', name: 'Mushrooms' }, 
    { category: 'veg', name: 'Onion' }, 
    { category: 'veg', name: 'Green Pepper' }, 
    { category: 'veg', name: 'Green Olives' } 
]; 
$scope.selectedToppings = []; 
$scope.isDisabled = function(item) { 
    return $scope.selectedToppings.length && (item.category !== $scope.selectedToppings[0].category); 
}; 

und Ihre html:

<md-option ng-disabled="isDisabled(topping)" ng-value="topping" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>