本文介紹了AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼，分享給大家，具體如下：

目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、點(diǎn)軍網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

首先解釋需求是這樣的，有個(gè)列表，當(dāng)你點(diǎn)擊哪一行時(shí)，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個(gè)addClass就行了，那么AngularJS如何實(shí)現(xiàn)呢？

下面我們看代碼部分

  
  



  

    

      

        序號(hào)
        姓名
        性別
        是否首條
        是否尾條
      
      

        {{$index+1}}
        {{stu.name}}
        {{stu.sex}}
        {{$first?'是':'否'}}
        {{$last?'是':'否'}}
      
    
  
  

1、首先，第一個(gè)< li >元素的"ng-class"值與"bold"屬性值綁定,使得該值指定的樣式加粗，這個(gè)相信大家都能看懂；

2、使用“ng-class-odd”和"ng-class-even"樣式分別綁定奇數(shù)和偶數(shù)行的樣式,從而實(shí)現(xiàn)了隔行換色的功能；

3、最后我們解釋一下，如何使得所點(diǎn)擊的< li >元素變色
 ①在< li >元素的單擊事件中，將執(zhí)行$scope對(duì)象中添加的"li_click()"方法;

 ②在該方法中將"$index(行號(hào)值)"作為實(shí)參傳給方法，并將"focus"屬性值設(shè)為“$index”值；

 ③因此當(dāng)單擊某行< li >元素時(shí),"focus"屬性值將變?yōu)橄鄳?yīng)的"$index"；

 ④此時(shí),< li >元素的"ng-class"樣式指令通過(guò)key/value對(duì)象的方式指定該元素需要添加的樣式,由于單擊< li >元素時(shí)，"$index"變量值和"focus"屬性值相同，也就是說(shuō)"$index==focus"的返回值為true；

 ⑤此時(shí)您應(yīng)該明白了，"ng-class"的樣式指令值變?yōu)?focus";

 ⑥經(jīng)過(guò)上面的分析及操作，我們實(shí)現(xiàn)了單擊< li >元素時(shí),添加背景樣式的效果.

 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。