javascript 使用选择作为标签时，如何使用 ng-options 禁用 angularjs 中的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29497567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I disable options in angularjs with ng-options when using select as label
提问by Chris
I've got these variables in a service:
我在服务中有这些变量：
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
my select looks like this:
我的选择是这样的：
<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>
that works fine to build the <select>, but I want to disable the months before the current month (can't select a month in the past)
可以很好地构建<select>，但我想禁用当前月份之前的月份（不能选择过去的月份）
Angular docs for ng-options show:
ng-options 的 Angular 文档显示：
"label disable when disable for value in array"
“禁用数组中的值时禁用标签”
so I've tried:
所以我试过：
<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>
That breaks the <select>- no options are rendered.
这打破了<select>- 没有呈现任何选项。
I also tried:
我也试过：
<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>
same result.
同样的结果。
What am I missing here?
我在这里错过了什么？
回答by brettvd
One way to do this is to use an ng-repeatand ng-disabledon an <option>within the <select>, like this:
要做到这一点的方法之一是使用ng-repeat和ng-disabled上<option>内<select>，就像这样：
<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>
Working JSFiddle here
在这里工作 JSFiddle
EDIT
编辑
As was mentioned above, this feature was not available until the 1.4.0 beta. Hereis a JSFiddle showing it works using the 1.4.0-beta.6 version of AngularJS
如上所述，此功能直到 1.4.0 测试版才可用。这是一个 JSFiddle，显示它使用 1.4.0-beta.6 版本的 AngularJS 工作
回答by cyber ice
I think I know why it's not working. I checked the ng-options documentation from Angular docs and noticed they had an example using that "label disable when disable for value in array" notation.
我想我知道为什么它不起作用。我检查了 Angular 文档中的 ng-options 文档，并注意到他们有一个使用“数组中的值禁用时禁用标签”符号的示例。
I tried changing from 1.4.0-beta.6 to 1.3.15 in their example on plnkr and it didn't work anymore.
我尝试在 plnkr 上的示例中将 1.4.0-beta.6 更改为 1.3.15，但它不再起作用。
It seems like it is a version issue.
好像是版本问题。
If you check https://github.com/angular/angular.js/issues/638you will see that this disable notation was recently added, as this issue was closed on February 18.
如果您查看https://github.com/angular/angular.js/issues/638，您会看到最近添加了此禁用符号，因为此问题已于 2 月 18 日关闭。
回答by Raja Rathinam
You can disable using ngOptions in angular 1.4.1 or above
您可以在 angular 1.4.1 或更高版本中禁用使用 ngOptions
HTML template
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>
Controller code
控制器代码
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}];})
