Ng: disabled does not work with select html element

Question

I am writing a web base project and I am using angularjs. I found a small error with the ng: disabled directive on the select html element. If an item is disabled, I can still change its value using the keyboard up and down arrows. Therefore, I would like to achieve that to disconnect a select element and to eliminate this trifle.

Can someone explain how this directive works? I looked at angularjs but can't figure it out.

Is this a mistake or normal behavior and I can’t understand anything ??

Thanks for the 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> 

Answer 1

The problem is that the selection box does not lose focus. The directive can solve this 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 use ng-options in your picklist.