From jQuery to AngularJS – replacing javascript with angular markup

I was recently faced with some JavaScript that was supposed hide / show textboxes next to the currently selected radio button and enable / disable a submit button depending on the state of the radio buttons.

disabled
Disabled state of radio button list
enabled
When radio button is selected, we see a textbox next to email and the submit button is enabled.

The script in question, well written, but it was around 60 lines of pure jQuery goodness, a classic JavaScript that is easy to write, but hard to maintain and extend.

Introducing AngularJS

I had already used Angular in the application, meaning my app was already created, I use one app for the whole web application and a separate controller for each functionallity on the page. The radio buttons being new functionallity, I added a controller for this section alone.

controller
controller is added by using ng-controller=”DistributionController” as an attribute to a div tag surrounding the whole block of HTML containing my RadioButton list

Showing / Hiding content

The first thing I wanted to accomplish, was making the elements next to my radio button appear, when the button is active. This was previously accomplished by this script:

oldEmailJs
When email is clicked, hide print and fax, show email. Remove attribute disabled from send button.

This logic is perfectly fine, and gets the job done, but when you have x amount of radio buttons, your script gets large pretty fast, since this code is repeated for each radio button. You can also write some more complex jQuery to make this work for all the radio buttons, without hard coding the element Ids, however Angular is simpler!

It turns out, i can accomplish this, without writing any JavaScript at all, all you need is to add some angular attributes to the radio buttons.

angularRadios
We add the same model to both radio buttons using ng-model=”distributionMode”, then we add ng-show to the span surrounding the objects we want to show / hide, annotate it with ng-show=”disitrbutionMode==’email’” and it magically works!

This works because I tell all my radio buttons to point to the same model, I then use the model in my ng-show expression. I only tell AngularJS when to show the elements, at all other times it should be hidden.

Next step – enabling / disabling the submit button

As it turns out, I can solve this without writing any special JavaScript code as well, remembering the ng-show attribute we used earlier. AngularJS has a similar attribute for disabling, ng-disabled=”expression”. As long as the expression within the attribute is true, the button is disabled.

disabling the submit
ng-disabled is set to !distributionMode.

Remembering that JavaScript evaluates null to false, and a string containing something to true, we can say that when distributionMode has a value, dont disable the submit button, else disable it. The attribute is called ng-disable, hence the negation.

Conclusion

After Angularising the HTML i was able to go from about 60 lines of code, to no lines at all, only AngularJS attributes.

I do know I actually write JavaScript inside the AngularJS expressions, but this is only tiny logic that controlls how the HTML is displayed. I find this alot easier to maintain and extend.

 

 

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>