Angularjs 使用禁用的行删除选项

是否可以使用将根据条件渲染为禁用行的

ng选项

这：

---

我不相信仅仅使用

ng选项

就可以实现您的要求。此问题是在angular项目上提出的，目前仍在讨论中：

似乎解决方法是使用此处和github版本中引用的指令：

以下是来自JSFIDLE的完整代码供参考（下面的代码来自alande的JSFIDLE）：

angular.module（'myApp'，[]）
.directive（'optionsDisabled'，函数（$parse）{
var disableOptions=函数（范围、属性、元素、数据、fnDisableIfTrue）{
//刷新“选择”元素中禁用的选项。
$（“选项[value！='？'”，元素）。每个（函数（即，e）{
变量局部变量={}；
局部变量[attr]=数据[i]；
$（this.attr（“disabled”，fnDisableIfTrue（scope，locals））；
});
};
返回{
优先级：0，
要求：'ngModel'，
链接：功能（范围、IELENT、iAttrs、ctrl）{
//解析表达式并生成禁用选项的数组
var expElements=iAttrs.options disabled.match（/^\s*（.+）\s+用于\s+（.+）\s+中的\s+（.+）\s*/）；
var attrToWatch=实验[3]；
var fnDisableIfTrue=$parse（expElements[1]）；
范围$watch（attrtwatch，函数（newValue，oldValue）{
如果（新值）
禁用选项（范围、经验[2]、iElement、newValue、fnDisableIfTrue）；
}，对）；
//正确处理模型更新
范围.$watch（iAttrs.ngModel，function）（新值，旧值）{
var disOptions=$parse（attrtwatch）（范围）；
如果（新值）
禁止选项（范围、经验[2]、拒绝、拒绝、FNDABLEIFTRUE）；
});
}
};
});
功能选项控制器（$scope）{
$scope.ports=[{name:'http'，isinuse:true}，
{name:'test'，isinuse:false}]；
$scope.selectedport='test'；
}

正如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">

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

与没有jQuery依赖项的but给出的类似

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

检查这个

控制器

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

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

指令

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

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

angular.module（'myApp'，[]）
.directive（'optionsDisabled'，函数（$parse）{
var disableOptions=函数（范围、属性、元素、数据、，
fnDisableIfTrue）{
//刷新“选择”元素中禁用的选项。
var options=element.find（“选项”）；
对于（var pos=0，index=0；pos可使用选项本身的
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>

小提琴

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

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


已知问题：


不使用
ng选项
不适用于
分组依据
选择索引，而不是对象
初始选择需要
$timeout

编辑：
可以选择任何对象属性（除了索引），但不能选择对象本身。此外，如果您有一个简单的数组而不是对象数组，下面的方法也可以

在HTML中更改此行：

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

与的“无jQuery”解决方案类似，但它可用于
groupby

在我的例子中，
groupby
不起作用，因为我的第一个
没有值，只使用了
，请从下拉列表中选择和项目
文本。这是一个稍微修改的版本，修复了此特定情况：

用法类似于@Vikas Gulati答案：

指令

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

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

角度模块（'disabledModule'，[]）
.directive（'optionsDisabled'，函数（$parse）{
var disableOptions=函数（范围、属性、元素、数据、fnDisableIfTrue）{
var realIndex=0；
angular.forEach（element.find（“选项”）、函数（值、索引）{
var elem=角度元素（值）；
if（elem.val（）！=“”）{
变量局部变量={}；
局部变量[attr]=数据[realIndex]；
realIndex++；//此操作跳过具有空值的数据[索引]（即首先使用“请从下拉列表中选择”项）
属性元素（“禁用”，fnDisableIfTrue（范围，局部））；
}
});
};
返回{
优先级：0，
要求：'ngModel'，
链接：功能（范围、IELENT、iAttrs、ctrl）{
//解析表达式并生成禁用选项的数组
var expElements=iAttrs.options disabled.match（/^\s*（.+）\s+用于\s+（.+）\s+中的\s+（.+）\s*/）；
var attrToWatch=实验[3]；
var fnDisableIfTrue=$parse（expElements[1]）；
范围$watch（attrtwatch，函数（newValue，oldValue）{
如果（新值）
禁用选项（范围、经验[2]、iElement、newValue、fnDisableIfTrue）；
}，对）；
//正确处理模型更新
范围.$watch（iAttrs.ngModel，function）（新值，旧值）{
var disOptions=$parse（attrtwatch）（范围）；
如果（新值）
禁止选项（范围、经验[2]、拒绝、拒绝、FNDABLEIFTRUE）；
});
}
};
});
Angular在1.4.0-beta.5版中增加了对此的支持

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

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

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

指令（'AllowDisableOptions'，['$timeout'，func
'ng-options': 'o.value as o.name disable when o.unavailable for o in options'

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

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