是否可以使用ng-options根据标准将其渲染为禁用的行？

这个：

也许有可能变成这样：

假设通过一个过滤器，该过滤器可以为所有具有shade =" dark"的颜色返回disabled='disabled'

@lucuma的答案(最初是可接受的答案)是正确的，但现在应该更新，因为这已在Angular 1.4中修复。请参阅ng-options的文档，其中也包含示例。

我正在使用Angular 1.5，这对我有用：

视图

控制者

vm.items = [
{ id: 'optionA', label: 'Option A' },
{ id: 'optionB', label: 'Option B (recommended)' },
{ id: 'optionC', label: 'Option C (Later)', disabled: true }
];
vm.selectedItem = vm.items[1];

---

正如@Lod所指出的，Angular在1.4.0-beta.5中添加了对此的支持。

对于角度js> = 1.4.0-beta.5。

1 2	<select ng-options="c.name disable when c.shade == 'dark' group by c.shade for c in colors">

对于angular js <1.4.0-beta.5，请参考以下解决方案：

与@lucuma给出的类似，但没有jQuery依赖性。

检查此http://jsfiddle.net/dZDLg/46/

控制者

1 2 3 4

<select ng-model="selectedport"         ng-options="p.name as p.name for p in ports"         options-disabled="p.isinuse for p in ports"></select>     <input ng-model="selectedport">

指示

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

angular.module('myApp', []) .directive('optionsDisabled', function($parse) {     var disableOptions = function(scope, attr, element, data,                                   fnDisableIfTrue) {         // refresh the disabled options in the select element.         var options = element.find("option");         for(var pos= 0,index=0;pos<options.length;pos++){             var elem = angular.element(options[pos]);             if(elem.val()!=""){                 var locals = {};                 locals[attr] = data[index];                 elem.attr("disabled", fnDisableIfTrue(scope, locals));                 index++;             }         }     };     return {         priority: 0,         require: 'ngModel',         link: function(scope, iElement, iAttrs, ctrl) {             // parse expression and build array of disabled options             var expElements = iAttrs.optionsDisabled.match(                 /^\\s*(.+)\\s+for\\s+(.+)\\s+in\\s+(.+)?\\s*/);             var attrToWatch = expElements[3];             var fnDisableIfTrue = $parse(expElements[1]);             scope.$watch(attrToWatch, function(newValue, oldValue) {                 if(newValue)                     disableOptions(scope, expElements[2], iElement,                         newValue, fnDisableIfTrue);             }, true);             // handle model updates properly             scope.$watch(iAttrs.ngModel, function(newValue, oldValue) {                 var disOptions = $parse(attrToWatch)(scope);                 if(newValue)                     disableOptions(scope, expElements[2], iElement,                         disOptions, fnDisableIfTrue);             });         }     }; });

注意：正如每个人正确指出的，此解决方案不适用于group by。如果要使其与group by一起使用，请参考下面@DHlavaty的解决方案。

相关讨论

• 这应该是公认的答案。接受的答案对我不起作用:(
• 如果要缩小，请确保对$ parse使用DI：.directive(optionsDisabled, [$parse , function ($parse) { ... }]);

---

Angular在1.4.0-beta.5中添加了对此的支持

1	<select ng-options="c.name disable when c.shade == 'dark' group by c.shade for c in colors">

相关讨论

• 杀死了谢谢！ ng-options="item as item.label disable when item.disabled for item in items track by item.id" required>。
• @DavidManpearl太好了，非常感谢我。

---

我不相信有一种方法可以仅使用ng-options来完成您要问的事情。这个问题是在Angular项目中提出的，并且仍然存在：

https://github.com/angular/angular.js/issues/638

看来，解决方法是使用此处和github问题中引用的指令：http://jsfiddle.net/alalonde/dZDLg/9/

这是jsfiddle的全部代码供参考(以下代码来自alande的jsfiddle)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<select ng-model="selectedport"         ng-options="p.name as p.name for p in ports"         options-disabled="p.isinuse for p in ports"></select>     <input ng-model="selectedport"> angular.module('myApp', []) .directive('optionsDisabled', function($parse) {     var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) {         // refresh the disabled options in the select element.         $("option[value!='?']", element).each(function(i, e) {             var locals = {};             locals[attr] = data[i];             $(this).attr("disabled", fnDisableIfTrue(scope, locals));         });     };     return {         priority: 0,         require: 'ngModel',         link: function(scope, iElement, iAttrs, ctrl) {             // parse expression and build array of disabled options             var expElements = iAttrs.optionsDisabled.match(/^\\s*(.+)\\s+for\\s+(.+)\\s+in\\s+(.+)?\\s*/);             var attrToWatch = expElements[3];             var fnDisableIfTrue = $parse(expElements[1]);             scope.$watch(attrToWatch, function(newValue, oldValue) {                 if(newValue)                     disableOptions(scope, expElements[2], iElement, newValue, fnDisableIfTrue);             }, true);             // handle model updates properly             scope.$watch(iAttrs.ngModel, function(newValue, oldValue) {                 var disOptions = $parse(attrToWatch)(scope);                 if(newValue)                     disableOptions(scope, expElements[2], iElement, disOptions, fnDisableIfTrue);             });         }     }; }); function OptionsController($scope) {     $scope.ports = [{name: 'http', isinuse: true},                     {name: 'test', isinuse: false}];     $scope.selectedport = 'test'; }

相关讨论

• 有没有JQuery依赖项的解决方案吗？
• 您可以使用有限的内置jqlite删除jquery并将其重写。 docs.angularjs.org/api/angular.element
• 您能否在小提琴上粘贴一个示例，说明如何完成？有角度的文档说，find()仅限于标记名才能进行查找！
• 这就是为什么答案包含对jQuery的依赖的原因。您可能会考虑在遇到障碍时试一试，并发布一个单独的问题。
• 在下面检查我的解决方案！谢谢！
• 只要我不使用Angular文档中指定的方法(包括select标记内的

语法如下：

1	'ng-options': 'o.value as o.name disable when o.unavailable for o in options'

相关讨论

• 我发现文档中没有禁用格式为select as label disable when condition for item in items的示例。但是这个答案实际上有帮助。

---

在选项本身上使用ng-repeat和ng-disabled可以达到类似的效果，从而避免使用新指令。

的HTML

1 2 3 4 5

<select ng-model="myColor">         <option ng-repeat="c in colors" ng-disabled="c.shade=='dark'" value="{{$index}}">             {{c.name}}         </option>     </select>

控制者

1 2 3 4 5 6 7 8 9 10 11 12

function ExampleController($scope, $timeout) {     $scope.colors = [       {name:'black', shade:'dark'},       {name:'white', shade:'light'},       {name:'red', shade:'dark'},       {name:'blue', shade:'dark'},       {name:'yellow', shade:'light'}     ];     $timeout(function() {         $scope.myColor = 4; // Yellow     }); }

小提琴

http://jsfiddle.net/0p4q3b3s/

已知的问题：

• 不使用ng-options
• 不适用于group by
• 选择索引，而不是对象
• 初始选择需要$timeout

编辑：
可以选择任何对象属性(除了索引)，但是不能选择对象本身。另外，如果您有一个简单的数组而不是对象数组，则下面的方法将起作用。

在HTML中更改此行：

1	<option ng-repeat="c in colors" ng-disabled="c.shade=='dark'" value="{{c.name}}">

在Controller中更改此行：

1	$scope.myColor = $scope.colors[4].name; // Yellow

相关讨论

• 您能解释一下为什么需要$ timeout吗？
• ng-repeat运行时，Angular不会更新所选内容，因此选择必须在之后进行。换句话说，ng-model首先在其空列表中搜索" myColor == 4"，但找不到，因此用空白填充。稍后，ng-repeat运行并设置列表，但是所选元素仍为空白。 $ timeout确保搜索" myColor == 4"稍后发生。

---

我有一个有趣的情况。一列下拉菜单，我需要它来禁用每个下拉菜单中已经选择的选项，但是我还需要它来保持启用已被选中的选项...

这是我的小插曲：使用ng-options启用/禁用值

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

var app = angular.module('ngoptions', []); app.controller('MainCtrl', function($scope) {   // disable the fields by default   $scope.coverage = [     { CoverageType: '', CoverageName: 'No Coverage' },     { CoverageType: 'A', CoverageName: 'Dependent Only' },     { CoverageType: 'B', CoverageName: 'Employee Plus Children' },     { CoverageType: 'C', CoverageName: 'Employee Only' },     { CoverageType: 'D', CoverageName: 'Employee Plus One' },     { CoverageType: 'E', CoverageName: 'Employee Plus Two' },     { CoverageType: 'F', CoverageName: 'Family' }, ];                           // values already set ex: pulled from db             $scope.rates = ['A','C', 'F'];       $scope.changeSelection = function (index, rate){      $scope.rates[index] = rate;      disableRecords();   }     // start by disabling records   disableRecords();     function disableRecords () {       // set default values to false       angular.forEach($scope.coverage, function (i, x) {              i.disable = false;       });       // set values to true if they exist in the array       angular.forEach($scope.rates, function (item, idx) {           angular.forEach($scope.coverage, function (i, x) {               if (item == i.CoverageType) {                    i.disable = true;               }           });       });   }   });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"> <!DOCTYPE html> <html ng-app="ngoptions">   <head>     <meta charset="utf-8" />     AngularJS Plunker     <script data-require="" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js">     document.write('<base href="' + document.location + '" />');     <link rel="stylesheet" href="style.css" />     <script src="app.js">   </head>   <body ng-controller="MainCtrl">     <table>       <thead></thead>       <tbody>         <tr ng-repeat="rate in rates">           <td>             <select             ng-model="rate"             ng-change="changeSelection($index, rate)"             ng-options="type.CoverageType as type.CoverageName disable when (type.disable == true && type.CoverageType != rate) for type in coverage"></select>           </td>         </tr>       </tbody>     </table>   </body> </html>

---

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

HTML模板

1 2 3 4 5 6

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

控制器代码

1 2	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}];

})

---

与@ Vikas-Gulati相似的"无jQuery"解决方案，但可与group by一起使用

在我的情况下，group by不起作用，因为我的第一个没有值，仅带有Please select and item from dropdown文本。这是一个经过稍微修改的版本，可以解决以下特殊情况：

用法类似于@ Vikas-Gulati答案：https://stackoverflow.com/a/20790905/1268533

指示

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

angular.module('disabledModule', [])     .directive('optionsDisabled', function($parse) {         var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) {             var realIndex = 0;             angular.forEach(element.find("option"), function(value, index){                 var elem = angular.element(value);                 if(elem.val()!="") {                     var locals = {};                     locals[attr] = data[realIndex];                     realIndex++; // this skips data[index] with empty value (IE first <option> with 'Please select from dropdown' item)                     elem.attr("disabled", fnDisableIfTrue(scope, locals));                 }             });         };         return {             priority: 0,             require: 'ngModel',             link: function(scope, iElement, iAttrs, ctrl) {                 // parse expression and build array of disabled options                 var expElements = iAttrs.optionsDisabled.match(/^\\s*(.+)\\s+for\\s+(.+)\\s+in\\s+(.+)?\\s*/);                 var attrToWatch = expElements[3];                 var fnDisableIfTrue = $parse(expElements[1]);                 scope.$watch(attrToWatch, function(newValue, oldValue) {                     if(newValue)                         disableOptions(scope, expElements[2], iElement, newValue, fnDisableIfTrue);                 }, true);                 // handle model updates properly                 scope.$watch(iAttrs.ngModel, function(newValue, oldValue) {                     var disOptions = $parse(attrToWatch)(scope);                     if(newValue)                         disableOptions(scope, expElements[2], iElement, disOptions, fnDisableIfTrue);                 });             }         };     });

---

我还隐藏了禁用选项，添加了休闲行：

$(this).css("display", fnDisableIfTrue(scope, locals) ?"none" :"block");

这是必要的，因为我无法简单地将它们过滤掉，因为此选择的初始值可能是禁用的选项之一。

---

由于无法升级到最新的angularJS，因此创建了一个更简单的指令来处理它。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.directive('allowDisabledOptions',['$timeout', function($timeout) {     return function(scope, element, attrs) {         var ele = element;         var scopeObj = attrs.allowDisabledOptions;         $timeout(function(){             var DS = ele.scope()[scopeObj];             var options = ele.children();             for(var i=0;i<DS.length;i++) {                 if(!DS[i].enabled) {                     options.eq(i).attr('disabled', 'disabled');                 }             }         });     } }])

有关更多详细信息：https://github.com/farazshuja/disabled-options

相关讨论

• 只是要添加的内容，如果select包含一个空的占位符选项，则选项的索引和绑定数组的索引将不匹配。因此导致禁用数组中的前一项。

---

Copyright ©  码农家园 联系：[email protected]