ng-options com linhas desativadas

É possível usar ng-options que serão renderizadas em linhas desativadas com base em critérios?

esta:

   

talvez seja possível transformar em algo assim:

   

e digamos que através de um filtro que poderia retornar disabled='disabled' para todas as colors que têm sombra = “escuro”

   black red blue   white yellow   

@ resposta do lucuma (originalmente a resposta aceita) estava correta, mas agora deve ser atualizada, porque isso foi corrigido em Angular 1.4. Veja os docs de ng-options que também contém um exemplo .

Estou usando o Angular 1.5 e isso funciona para mim:

Visão

Controlador

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

Como apontado pela @Lod Angular adicionou suporte para isso em 1.4.0-beta.5.

Para angular js > = 1.4.0-beta.5 .

  

E para js angulares <1.4.0-beta.5, consulte a solução abaixo:

Semelhante ao dado por @lucuma mas sem dependência de jQuery .

Verifique isso http://jsfiddle.net/dZDLg/46/

Controlador

 

Directiva

 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 

Nota : Esta solução não funciona com o group by corretamente apontada por todos. Consulte a solução abaixo por @DHlavaty se você estiver olhando para fazê-lo funcionar com o group by .

Angular adicionou suporte para isso em 1.4.0-beta.5

  

Eu não acredito que haja uma maneira de fazer o que você está pedindo apenas usando ng-options . Esta questão foi levantada no projeto angular e ainda está aberta:

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

Parece que a solução é usar uma diretiva que é referenciada aqui e na questão do github: http://jsfiddle.net/alalonde/dZDLg/9/

Aqui está o código inteiro do jsfiddle para referência (o código abaixo é do jsfiddle do 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'; }

Desde fevereiro de 2015, existe uma maneira de desativar as opções na sua tag ng-options.

Este link mostra a adição do recurso no github

Descobri que usando a versão 1.4.7 angular, a syntax mudou de ‘desativar por’ para ‘desativar quando’.

A syntax para isso é:

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

Um efeito semelhante pode ser alcançado usando ng-repeat e ng-disabled na própria opção, evitando o uso de uma nova diretiva.

HTML

 

Controlador

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

Violino

http://jsfiddle.net/0p4q3b3s/

Problemas conhecidos:

  • Não usa ng-options
  • Não funciona com group by
  • Seleciona o índice, não o object
  • Requer $timeout para seleção inicial

Eu tive uma situação interessante. Uma série de menus suspensos e preciso desabilitar as opções que já foram selecionadas em cada um dos menus suspensos, mas também preciso ativá-lo para ativar o que já foi selecionado …

aqui está o meu plunker: Habilitar / desabilitar valores com 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; } }); }); } }); 
      AngularJS Plunker       

Solução similar “sem jQuery” como @ Vikas-Gulati , mas funciona com group by

No meu caso, group by não funciona, porque a minha primeira foi sem valor, apenas com Please select and item from dropdown texto Please select and item from dropdown . Esta é uma versão ligeiramente modificada, que corrige essa situação específica:

O uso é semelhante à resposta @ Vikas-Gulati: https://stackoverflow.com/a/20790905/1268533

Directiva

 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  

Você pode desativar usando ngOptions em angular 1.4.1 ou acima

Modelo HTML

 

Código controlador

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

})

Como não posso atualizar para o mais recente angularJS, criei uma diretiva mais simples para lidar com isso.

 .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 

para mais detalhes: https://github.com/farazshuja/disabled-options

Eu também escondi opções desativadas adicionando linha seguinte:

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

Foi necessário, pois não podia simplesmente filtrá-los, pois o valor inicial desse select poderia ser uma das opções desativadas.