javascript - Angular HTML Select option disable and enable

ID : 274327

viewed : 43

Tags : javascripthtmlangularjsangularjs-ng-repeatjavascript





Top 4 Answer for javascript - Angular HTML Select option disable and enable

vote vote

96

Assuming you have a structure like this:

  $scope.filter = {     fields: [       {id: 1, name: "a", selectable: false},       {id: 2, name: "asdf", selectable: true},       {id: 3, name: "qwet", selectable: false},       {id: 4, name: "qnjew", selectable: true},       {id: 5, name: "asdjf", selectable: false}     ]   }; 

This should work for you:

  <select>     <option ng-repeat="field in filter.fields" ng-disabled="field.selectable" value="{{field.id}}">{{field.name}}</option>   </select> 
vote vote

89

While the ng-disabled attribute will technically work, you are likely to encounter bugs when using ng-repeat on options. This is a well known issue and is exactly the reason that the angular team created ng-options. There is not yet an angular implementation for using ng-options and ng-disabled together, but Alec LaLonde created this custom directive that you can add in and use. See the issue forum here: https://github.com/angular/angular.js/issues/638 and the jsfiddle from that post.

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

74

This is actually a fairly old question. In the later version of Angular (angular 1.4+) you have the ngOptions directive. Here is the link:-

https://docs.angularjs.org/api/ng/directive/ngOptions

There is now a syntax for handling this case:-

label disable when disable for value in array track by trackexpr 

I thought I would put this in in case someone else visits this page.

vote vote

70

Top 3 video Explaining javascript - Angular HTML Select option disable and enable







Related QUESTION?