如何禁用从Angular JS下拉列表中选择特定选项？

Question

我想禁用AngularJS下拉列表中的特定选项.

它应该在下拉列表中列出,但不应该允许它被选中.所以我需要禁用它.

MyFile.tpl.html

<select class="form-control" ng-model="selectedFruits" 
        ng-options="fruit as fruit.name for fruit in fruits">
</select>

MyController.js

$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
                 {'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
                 {'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];

这里所有的水果名称都应该在下拉列表中列出,但芒果和樱桃应该被禁用,不应该让用户选择它.

可能吗？如果可能,请告诉我解决方案.

Answer 1

select使用disabled属性禁用选项.由于ng-options不支持禁用,因此您必须根据要求生成选项ng-repeat并设置禁用.

模板:

<select class="form-control" ng-model="selectedFruits">
    <option
        ng-repeat="fruit in fruits"
        ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
        ng-value="fruit">
         {{fruit.name}}
  </option>
</select>

内控制器:

$scope.disabledFruits = ["mango", "cherry"]

JSBin.