How To Disable Dropdown List Item In Angularjs?

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://jsfidd

Solution 1:

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.

Solution 2:

Use Angular's ngDisabled directive.

HTML

<selectng-model="numbers.value"required><optionng-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 }
]