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

【问题标题】：How to make other groups unselectable when you select an option of one group in md-select?在md-select中选择一个组的选项时如何使其他组不可选？
【发布时间】：2017-07-10 22:57:26
【问题描述】：

我正在尝试使用

实现下拉列表

<md-select>

和

<md-optgroup>.

我在这里关注“选项组”示例：https://material.angularjs.org/latest/demo/select

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

例如，如果用户首先选择“培根”作为浇头，那么仍然只能选择“意大利辣香肠”、“香肠”、“碎牛肉”。 VEGGIES 下的其他选项全部禁用。除非用户取消选择“培根”，否则 VEGGIES 下的所有选项都将再次可用。

有人对此有解决方案吗？谢谢。

【问题讨论】：

标签： angularjs angular-material

【解决方案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>

【讨论】：

谢谢。你的想法行得通。但是代码并不完全正确。一些编辑：ng-value="topping"，否则 selectedToppings.category 未定义。还需要单独处理 selectedToppings.length == 0 的情况，否则当你取消选择所有选中的选项时，禁用的选项将不再可用。
对了，能不能加个组名也可以选择的功能？当您选择组名时，该组中的所有选项都将被选中，而其他组中的选项将被禁用。谢谢。
你是正确的 ng-value="topping"。关于 selectedToppings.length == 0 分开，没必要。关于该功能，我认为不可能，但您可以在每个选项循环之前添加另一个自定义选项以全选。
当 selectedToppings.length 为 0 时，访问 $scope.selectedToppings[0] 时会报错，所以必须检查 selectedToppings.length 是否为零，如果不为零，然后您可以访问 $scope.selectedToppings[0]。
@user3293338 它已经检查长度是否不为 0（表示不为假）。返回 $scope.selectedToppings.length && .... embed.plnkr.co/UeQjjGNbSM1tn1RVFKzT