The Angular Bootstrap Website V tutorial demonstrates how to move much of the logic and code introduced in the Angular Bootstrap Website IV tutorial. The idea is to tidy things up by moving all the logic out of the ‘html’ document and into the javascript document.
First of all a PanelController is created. The PanelController will look like this.

The PanelController is added into the opening ‘section’ tag on line 15 in the ‘html’ document. The PanelController is being specified as ‘panel’ which is the alias.

In the javascript document on line 6 a PanelController is defined. This is how the PanelController looks like in the javascript document.

Now the ‘ng-init’ is removed from the ‘section’ tag and this logic is now placed inside the javascript document. The ‘tab’ is made a property of the PanelController and the value set to ‘1’.

Next we create a ‘setTab’ function in the javascript document.

And now back in the ‘html’ page the ‘ng-click’ directive in the ‘a’ element nested in the ‘li’ elements is changed to look like this.

Lastly we create a ‘isSelected’ function to make a comparison. The ‘isSelected’ function will check if current tab is the same value as the ‘selectTab()’ value and then return either a ‘true‘ value or a ‘false‘ value.

And finally in the ‘ng-class’ directive the ‘panel.isSelected’ call is added like this.

As well changing the ‘ng-show’ directive in the panels, like this.

And here is the working example.

See the Pen Angular Bootstrap Website VOne by Daniel (@Parsons) on CodePen.

Angular logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *