Question

我正在尝试使用

实现下拉列表

<md-select>

和

<md-optgroup>.

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

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

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

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

Answer 1

您可以通过禁用ng禁用项目。您应该通过禁用与已选择的类别不同的所有项目来完成此操作。

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

如何在md-select中选择一个组的选项时，如何使其他组无法选择？

1 个答案: