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

Source: Internet
Author: User
Tags change settings

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.