ng-options с отключенными строками

Угловая добавленная поддержка для этого в 1.4.0-beta.5

Я не верю, что есть способ сделать то, что вы просите, просто используя ng-options . Эта проблема была поднята по угловому проекту и по-прежнему открыта:

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

Кажется, что работа вокруг заключается в использовании директивы, на которую ссылаются здесь и в проблеме github: http://jsfiddle.net/alalonde/dZDLg/9/

Вот полный код из jsfiddle для справки (код ниже из jsfiddle alande):

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

С февраля 2015 года существует способ отключить параметры в теге ng-options.

Эта ссылка показывает добавление функции на github

Я обнаружил, что с использованием углового 1.4.7 синтаксис изменился с «disable by» на «disable when».

Синтаксис для этого:

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

Аналогичный эффект может быть достигнут с помощью ng-repeat и ng-disabled в самой опции, избегая использования новой директивы.

HTML

 
   {{c.name}}    

controller

 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 для первоначального выбора

У меня была интересная ситуация. Массив выпадающих списков, и мне нужно его отключить параметры, которые уже были выбраны в каждом из выпадающих меню, но мне также нужно, чтобы он включал тот, который был выбран уже …

здесь мой плункер: Включить / Отключить значения с помощью ng-options

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

Аналогичное «без jQuery» решение как @ Vikas-Gulati , но оно работает с group by

В моем случае, group by не работает, потому что мой первый был без значения, просто с помощью Please select and item from dropdown . Это слегка измененная версия, которая фиксирует эту конкретную ситуацию:

Использование simmilar @ Vikas-Gulati отвечает: https://stackoverflow.com/a/20790905/1268533

директива

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

Вы можете отключить использование ngOptions в угловом 1.4.1 или выше

Шаблон HTML

 
 
  Select Report Type   

Код controllerа

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

})

Поскольку я не могу обновиться до последней угловой строки, поэтому была создана более простая директива для ее обработки.

 .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