How to disable dropdown list item in AngularJS?

Question

I am a beginner to AngularJS and I am making a web app that needs to disable exiting values in a dropdown list.

I know how to do it in jQuery. It is just like this: http://jsfiddle.net/qiushibaike/FcLLn/

But I don't really know how to do it in AngularJS, Should I try to disable the item or hide it? Can I set a value

HTML

<select ng-model="numbers.value" required>
     <option ng-repeat="item in items"> {{item.name}} </option>
</select><br/>

JavaScript

$scope.numbers= {};

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222'},
    { id: 3, name: '33333'}
];

If I have something like this, how can I disable or hide the option 2 and 3 by AngularJS like what I did by using jQuery?

suggest learning how to filter and use filter instead of disable — charlietfl
– charlietfl, Commented Dec 1, 2013 at 23:49

Pallav Gupta · Accepted Answer · 2016-05-23 10:57:22Z

2

This is also possible with ngOptions.

You just need to add "disable when" in your ng-options tag.

In your case, you can also do like this

HTML

    <select ng-model="numbers.value" 
    ng-options="var.name as var.name disable when var.disabled for var in items" required>
      <option value="">-- Select --</option></select>

Javascript

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

Plunkr

If you want to disable any option dynamically from your code,

here is a Plunkr : Dynamic Example.

answered May 23, 2016 at 10:57

Pallav Gupta

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dutzi · Accepted Answer · 2013-12-02 00:38:37Z

0

Use Angular's ngDisabled directive.

HTML

<select ng-model="numbers.value" required>
    <option ng-repeat="item in items" ng-disabled="item.disabled"> {{item.name}} </option>
</select>

Javascript

$scope.items = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

answered Dec 2, 2013 at 0:38

dutzi

1,9282 gold badges18 silver badges23 bronze badges

1 Comment

Alexey Over a year ago

As for now, there is no possibility to set disabled options with ngOptions directive - there is a corresponding issue github.com/angular/angular.js/issues/638. So you should use ngRepeat instead.

Collectives™ on Stack Overflow

How to disable dropdown list item in AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related