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

Question

我在服务中有这些变量：

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 看起来像这样：

<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> 效果很好，但我想禁用当前月份之前的月份（不能 select 过去一个月）

Angular ng-options 的文档显示：

"label disable when disable for value in array"

所以我试过了：

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

同样的结果。

我在这里错过了什么？

Answer 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

EDIT

如上所述，此功能直到 1.4.0 测试版才可用。 Here 是一个 JSFiddle，显示它可以使用 AngularJS

的 1.4.0-beta.6 版本

Answer 2

我想我知道为什么它不起作用。我检查了 Angular 文档中的 ng-options 文档，发现他们有一个使用 "label disable when disable for value in array" 符号的示例。

我尝试在 plnkr 上的示例中将 1.4.0-beta.6 更改为 1.3.15，但它不再起作用了。

好像是版本问题

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

Answer 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}];})

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

How do I disable options in angularjs with ng-options when using select as label

javascript

angularjs

angularjs-directive

ng-options