md-selectで1つのグループのオプションを選択すると、他のグループを選択不可にするにはどうすればいいですか？

Question

私は

<md-select> 

と

<md-optgroup>. 

を使用して、ドロップダウンリストを実装しようとしています、私はここに例の「オプショングループ」を以下の午前：https://material.angularjs.org/latest/demo/select

しかし、私は実装したいです少し複雑です。ユーザーがグループの下でオプションを選択すると、他のグループのすべてのオプションはグレー（選択できません）になります。同じグループのオプションだけが選択可能です。

たとえば、ユーザーがトッピングを最初に選択した場合、「Pepperoni」、「Sausage」、「Ground Beef」のみが選択可能です。 VEGGIESの他のオプションはすべて無効になっています。ユーザーが「Bacon」の選択を解除しない限り、VEGGIESのすべてのオプションが再び使用可能になります。

誰にでも解決策がありますか？ ありがとうございます。

Answer 1

ng-disabledによってアイテムを無効にすることができます。 これは、すでに選択されているものと同じカテゴリを持たないすべてのアイテムを無効にすることによって達成する必要があります。

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

とあなたのhtml：

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