使用选择作为标签时，如何使用 ng-options 禁用 angularjs 中的选项答案

【问题标题】：How do I disable options in angularjs with ng-options when using select as label使用选择作为标签时，如何使用 ng-options 禁用 angularjs 中的选项
【发布时间】：2016-04-20 16:18:24
【问题描述】：

我在服务中有这些变量：

months: [
        { label: 'January', value: 1, disabled: true },
        { label: 'February', value: 2, disabled: true },
        { label: 'March', value: 3, disabled: true },
        { label: 'April', value: 4, disabled: false },
        { label: 'May', value: 5, disabled: false },
        { label: 'June', value: 6, disabled: false },
        { label: 'July', value: 7, disabled: false },
        { label: 'August', value: 8, disabled: false },
        { label: 'September', value: 9, disabled: false },
        { label: 'October', value: 10, disabled: false },
        { label: 'November', value: 11, disabled: false },
        { label: 'December', value: 12, disabled: false }
    ],
currentMonth: 4

我的选择如下所示：

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label for month in months"></select>

构建<select> 效果很好，但我想禁用当前月份之前的月份（不能选择过去的月份）

ng-options 的 Angular 文档显示：

"数组中的值禁用时标签禁用"

所以我试过了：

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label disable when month.value < currentMonth for month in months"></select>

这打破了<select> - 不呈现任何选项。

我也试过了：

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.label disable when month.value < currentMonth for month in months"></select>

同样的结果。

我在这里错过了什么？

【问题讨论】：

你用的是什么版本？
似乎在那个版本中不可用。在 1.4.0 中，您的代码有效
好吧，当我将 angular api 文档切换到 1.3.11（显然默认为最新版本）时，这很尴尬，“禁用时”从文档中神奇地消失了 - 你是对的先生！。

标签： javascript angularjs angularjs-directive ng-options

【解决方案1】：

一种方法是在<select> 内的<option> 上使用ng-repeat 和ng-disabled，如下所示：

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()">
    <option ng-repeat="month in months" ng-disabled="month.value < currentMonth" >{{month.label}}</option>
</select>

工作 JSFiddle here

编辑

如上所述，此功能直到 1.4.0 测试版才可用。 Here 是一个 JSFiddle，显示它使用 AngularJS 的 1.4.0-beta.6 版本工作

【讨论】：

是的，如果我无法使用 ng-options 来执行此操作，那是我的后备方法。我们在应用程序的其他任何地方都使用了 ng-options，我希望能保持一致。
是的 - 如果您的 Angular 版本为

【解决方案2】：

我想我知道它为什么不起作用。我检查了 Angular 文档中的 ng-options 文档，并注意到他们有一个使用“禁用数组中的值时标签禁用”表示法的示例。

我尝试在他们关于 plnkr 的示例中从 1.4.0-beta.6 更改为 1.3.15，但它不再起作用。

好像是版本问题。

如果您检查https://github.com/angular/angular.js/issues/638 你会看到这个禁用符号是最近添加的，因为这个问题已于 2 月 18 日关闭。

【讨论】：

【解决方案3】：

您可以在 Angular 1.4.1 或更高版本中禁用使用 ngOptions

HTML 模板

<div ng-app="myapp">
<form ng-controller="ctrl">
    <select id="t1" ng-model="curval" ng-options='reportingType.code as reportingType.itemVal disable when reportingType.disable for reportingType in reportingOptions'>
        <option value="">Select Report Type</option>
    </select>

</form></div>

控制器代码

angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.reportingOptions=[{'code':'text','itemVal':'TEXT','disable':false}, {'code':'csv','itemVal':'CSV','disable':true}, {'code':'pdf','itemVal':'PDF','disable':false}];})

【讨论】：