CODEWITHSUNDEEP
javascriptangularjs
Jaroslaw.zawila
Jaroslaw.zawila

Reputation: 509

ng:disabled does not work with select html element

I am writing web base project and I am using angularjs. I have find little bug with ng:disabled directive on select html element. If the element is disabled I still could change its value using keyboard arrows down and up. So I would like to achieve is disabled the select element and eliminate this little thing.

Could someone explain how this directive works ?? I have looked at angularjs but cannot figure out it.

Is it a bug or normal behaviour and I cannot understand something??

Thanks for you answers in advance.

Example: http://jsfiddle.net/kickwce/m23Gr/1/

<select class="select input-large" id="listType" name="listType"
                        ng-model="listType" ng-disabled="listType">
                        <option value="">- choose -</option>
                        <option value="item1">List of tracks</option>
                        <option value="item2">List of collections</option>
                    </select>

Upvotes: 4

Views: 12685

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364747

The problem appears to be that the select box does not lose focus. A directive can solve that problem:

myApp.directive('blur', function () {
  return function (scope, element, attrs) {
    attrs.$observe('blur', function (newValue) {
      newValue != "" && element[0].blur();
    });
  }
});

HTML:

<select ... ng-model="listType" ng-disabled="listType" blur="{{listType}}">

Fiddle.

You should probably be using ng-options with your select list.

Upvotes: 6

Related Questions