Disabling/Enabling html elements with AngularJS

Question

I'm starting to learn AngularJS for a web app, and I have an issue with understanding the workflow of the framework.

I have 2 dropdowns :

<select class='selectorDropdown' ng-model='selectedElement' ng-change='selectedElementChange()'>
    <option value='0' disabled selected>Option0
    <option value='1'>Option1
    <option value='2'>Option2
</select>

<select class='selectorDropdown' id='selector2' disabled>
    <option value='3'>Option1
    <option value='4'>Option2
</select>

I want the second dropdown to be enabled only after another option than Option0 has been selected on the first dropdown. So here's my Javascript code :

$scope.selectedElementChange = function() {
    document.getElementById('selector2').disabled = true;
}

So far, it looks like regular Javascript (and I'm manipulating the DOM), so I guess this is not really the way AngularJS was mean to be used. Could someone help me understand the "correct" way to do this with AngularJS ?

Thomas · Accepted Answer · 2016-05-25 08:08:14Z

1

Something like this should work, without writing a single line of JavaScript:

<select class='selectorDropdown' id='selector2' ng-disabled='selectedElement == "0"'>
    <option value='3'>Option1
    <option value='4'>Option2
</select>

You don't need the ng-change either. Angular takes care of updating the model when the first selector changes, and then runs a digest loop to update anything else.

You also need to initialize selectedElement somewhere; Angular doesn't take its value from the fact that you wrote selected on the Option0 element. The cleanest way is to do it in the controller:

$scope.selectedElement = "0";

The quick and dirty way is ng-init:

<select ... ng-init='selectedElement = "0"'>

Plunk.

edited May 25, 2016 at 8:08

answered May 25, 2016 at 8:02

Thomas

183k57 gold badges383 silver badges510 bronze badges

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

Collectives™ on Stack Overflow

Disabling/Enabling html elements with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related