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'}
];

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

Answer 1

使用ngOptions也可以。

您只需要添加＆＃34; 禁用＆＃34;在你的ng-options标签中。

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

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 }
]

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

2 个答案: