如何在 AngularJS 中禁用下拉列表项？

Question

我是 AngularJS 的初学者，我正在制作一个需要禁用下拉列表中的现有值的 Web 应用程序。

我知道如何在 jQuery 中做到这一点。就是这样：http://jsfiddle.net/qiushibaike/FcLLn/

但我真的不知道如何在 AngularJS 中做到这一点，我应该尝试禁用该项目还是隐藏它？我可以设置一个值吗

HTML

<select ng-model="numbers.value" required>
     <option ng-repeat="item in items"> {{item.name}} </option>
</select><br/>

JavaScript

$scope.numbers= {};

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222'},
    { id: 3, name: '33333'}
];

如果我有这样的东西，我如何像使用 jQuery 一样禁用或隐藏 AngularJS 的选项 2 和 3？

Answer 1

这也可以通过 ngOptions 实现。

您只需要在 ng-options 标签中添加“disable when”即可。

在你的情况下，你也可以这样做

HTML

    <select ng-model="numbers.value" 
    ng-options="var.name as var.name disable when var.disabled for var in items" required>
      <option value="">-- Select --</option></select>

Javascript

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

Plunkr

如果您想从代码中动态禁用任何选项，

这是Plunkr : Dynamic Example。

Answer 2

使用 Angular 的 ngDisabled 指令。

HTML

<select ng-model="numbers.value" required>
    <option ng-repeat="item in items" ng-disabled="item.disabled"> {{item.name}} </option>
</select>

Javascript

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]