How to disable option in Angular JS?

All we need is an easy explanation of the problem, so here it is.

I have ng-repeat option:

<option ng-repeat="year in data.dateList.year" value="{{year.id}}" ng-disabled="(year.id < 2015) ?  true : false">

You can see ng-disabled="(year.id < 2015) ? true : false"

Why my option is not disabled if year.id less than 2015?

This is my new code:

<div class="itm" ng-repeat="a in range(num) track by $index">
   <option ng-repeat="year in data.dateList.year" ng-disabled="(year.id) < formData.beginYear[$index]">
      {{year.value}}
   </option>
</div>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You need to use ng-options here which has way to disable the options

<select ng-model="year"
  ng-options="year.id disable when (year.id < 2015) for year in data.dateList.year">
</select>

Update

For two input field depends each other, you can do it like below. Main problem was while you were doing comparison it was string, as value attributes convert the value to string format. You could use ng-options that does preserves the dataType of the value & will make more easier while making comparison.

Markup

<select ng-model="yr[$index]" 
   ng-options="year.id as year.id for year in years">
</select>

<select ng-model="year" 
   ng-options="year.id disable when (year.id < yr[$index]) for year in years">
</select>

Demo Plunkr

Method 2

ng-disabled is only meant to be use on input elements:

<INPUT
  ng-disabled="expression">
...
</INPUT>

Angular Docs

Method 3

Use this Code

<option ng-repeat="year in data.dateList.year track by $index" ng-disabled="(year.id) < 2015">{{year.id}}</option>

see this code

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Tags: , , , ,

Leave a Reply