AngularJS click to add a style, click the sample code of the color change settings, and angularjs instance

AngularJS click to add a style, click the sample code of the color change settings, and angularjs instance

This article introduces the example code for adding a style by clicking AngularJS and clicking the color change settings. The details are as follows:

The requirement is explained first. There is a list. When you click on which line, the background of which line turns gray. in JQ, we all know that this is very easy, just add an addClass. How can AngularJS be implemented?

The Code section is as follows:

<! Doctype html> 
1. First, the "ng-class" value of the first <li> element is bound to the "bold" attribute value, so that the style specified by this value is bold, which is understandable to everyone;
2. Use the "ng-class-odd" and "ng-class-even" styles to bind the odd and even rows respectively, so as to implement the color switching function of the line;
3. Finally, Let's explain how to change the color of the clicked <li> element.
① In the Click Event of the <li> element, the "li_click ()" method added to the $ scope object is executed;
② In this method, "$ index (row number value)" is passed as a real parameter to the method, and the "focus" attribute value is set to "$ index" value;
③ When you click the <li> element of a row, the "focus" attribute value is changed to the corresponding "$ index ";
④ When you click the <li> element, the "$ index" variable value is the same as the "focus" attribute value, that is, "$ index = focus" returns true;
⑤ Now you should understand that the style instruction value of "ng-class" is changed to "focus ";
⑥ After the above analysis and operations, we have achieved the effect of adding a background style when clicking the <li> element.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.