How to disable Angular Drop Down if the model is null or empty?

Question

I have an angular DropDown , which is bound to scope variable, which is array. I would like disable the dropdown when the array empty.

HTML

 <select class="qtDropDown" ng-model="chartModel" ng-options="riskimp.IndustryName for riskimp in riskImprovement"  ng-change="buildChartData(chartModel)"></select>

JS

if( $scope.riskProfileModel.riskProfileData.RiskImprovment ) 
 {

     //I am doing some chart generation
   }

  else  {

          return null;
       }

I am not sure how to disable the drop down. Can anybody suggest how to do that ?

Varedis · Accepted Answer · 2015-07-06 15:45:37Z

1

If you can set a controller property in javascript return a bool if it is enabled/disabled then you can do the following:

<select ng-disabled="isDisabled">
    ...
</select>

edited Jul 6, 2015 at 15:45

answered Dec 17, 2014 at 15:30

Varedis

7585 silver badges14 bronze badges

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

2 Comments

Aj1 Over a year ago

Thanks @Varedis. I am not sure who down voted for u answer, but it totally works the way I wanted it to.

Varedis Over a year ago

On reflection you probably don't want to use that as advertised here: docs.angularjs.org/api/ng/directive/ngDisabled changing the code sample to ng-disabled="isDisabled" should perform the same though

mitch · Accepted Answer · 2014-12-17 15:32:18Z

1

Use the ng-disabled property to still show the object without hiding it. Add in your element:

ng-disabled="chartModel.length == 0"

answered Dec 17, 2014 at 15:32

mitch

99510 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to disable Angular Drop Down if the model is null or empty?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related