带禁用行的ng-options

Question

是否可以使用ng-options它根据标准呈现为禁用的行？

这个:

 <select ng-options="c.name group by c.shade for c in colors">

也许有可能变成这样的事情:

 <select ng-options="c.name group by c.shade for c in colors | disabled(c.shade)">

让我们说通过一个过滤器可以返回disabled='disabled'所有颜色有阴影="黑暗"

<select>
   <optgroup label="dark">
      <option value="0" disabled="disabled">black</option>
      <option value="2" disabled="disabled">red</option>
      <option value="3" disabled="disabled">blue</option>
   </optgroup>
   <optgroup label="light">
      <option value="1">white</option>
      <option value="4">yellow</option>
   </optgroup>
 </select>

Answer 1

正如@Lod Angular 指出的那样,在1.4.0-beta.5中增加了对此的支持.

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

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

对于角度js <1.4.0-beta.5,请参考以下解决方案:

类似于@lucuma给出但没有jQuery依赖的那个.

检查这个http://jsfiddle.net/dZDLg/46/

调节器

<div ng-controller="OptionsController">
    <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">
</div>

指示

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所有人正确指出.如果您希望使用@DHlavaty,请参阅下面的解决方案group by.

Answer 2

@lucuma的答案(原来接受的答案)是正确的,但到现在应该更新,因为这是在Angular 1.4中修复的.请参阅ng-options的文档,其中还包含一个示例.

我正在使用Angular 1.5,这对我有用:

视图

<select ng-model="$ctrl.selectedItem" ng-options="item as item.label disable when item.disabled for item in $ctrl.listItems">

调节器

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

Answer 3

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

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

Answer 4

我不相信有办法做你正在使用的问题ng-options.这个问题是在角度项目上提出的,仍然是开放的:

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

看来,解决方法是使用这里引用的指令和github问题:http: //jsfiddle.net/alalonde/dZDLg/9/

以下是来自jsfiddle的完整代码供参考(下面的代码来自alande的jsfiddle):

<div ng-controller="OptionsController">
    <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">
</div>

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

Answer 5

自2015年2月以来,有一种方法可以禁用ng-options标记中的选项.

此链接显示在github上添加该功能

我发现使用angular 1.4.7,语法已从'disable by'更改为'disable when'.

这个语法是:

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

Answer 6

使用ng-repeat和ng-disabled选项本身可以实现类似的效果,避免使用新指令.

HTML

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

调节器

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初始选择