Angularjs 在md select中选择一个组的选项时，如何使其他组不可选择？

我正在尝试使用实现一个下拉列表

<md-select>

及

。

以下是“选项组”示例：

但是我想要实现的有点复杂。一旦用户选择了某个组下的选项，则其他组中的所有选项都将为灰色（无法选择）。只有同一组中的选项仍然是可选的

例如，如果用户首先选择“培根”作为配料，那么只有“意大利香肠”、“香肠”、“绞牛肉”仍然是可选的。“蔬菜”下的其他选项均已禁用。除非用户取消选择“培根”，否则VEGGIES下的所有选项将再次可用

有人能解决这个问题吗？

---

谢谢。

您可以通过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>

{{topping.name}

谢谢。你的想法行得通。但这些代码并不完全正确。某些编辑：ng value=“topping”，否则选择的toppings.category未定义。您还需要单独处理selectedToppings.length==0时的情况，否则，当您取消选择所有选定选项时，禁用的选项将不再可用。顺便问一下，是否可以添加组名也可以选择的功能？选择组名时，将选择组中的所有选项，并禁用其他组中的选项。谢谢。您的ng value=“topping”是对的。关于selectedToppings.length==0，不需要单独设置。关于该功能，我认为这是不可能的，但您可以在每个选项循环之前添加另一个自定义选项来全选。当selectedToppings.length为零时，您在尝试访问$scope.selectedToppings[0]时会出错，因此您必须检查selectedToppings.length是否为零，如果不是零，然后可以访问$scope.selectedToppings[0]。@user3293338它已经检查长度是否为0（表示不为false）。返回$scope.selectedToppings.length&&。。。。

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