AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼

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

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

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

下面我們看代碼部分

<!doctype html>
<html ng-app="a2_11">
<head>
  <title>添加元素樣式</title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
<style type="text/css">
  body{font-size:12px}
  ul{margin:0;padding:0;width:408px;list-style-type:none}
  ul li{float:left;padding:5px 0}
  ul .odd{color:#0026ff}
  ul .even{color:red}
  ul .bold{font-weight:700}
  ul li span{float:left;padding:0 10px;width:52px}
  ul .focus{background-color:#ccc}
</style>
</head>
<body>
  <div ng-controller="c2_11">
    <ul>
      <li ng-class="{{bold}}">
        <span>序號(hào)</span>
        <span>姓名</span>
        <span>性別</span>
        <span>是否首條</span>
        <span>是否尾條</span>
      </li>
      <li ng-class-odd="'odd'"
        ng-class-even="'even'"
        ng-repeat=" stu in data"
        ng-click='li_click($index)'
        ng-class='{focus: $index==focus}'>
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{$first?'是':'否'}}</span>
        <span>{{$last?'是':'否'}}</span>
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    var a2_11 = angular.module('a2_11', []);
    a2_11.controller('c2_11', ['$scope', function ($scope) {
      $scope.bold = "bold";
      $scope.li_click = function (i) {
        $scope.focus = i;
      };
      $scope.data = [
      { name: "張明明", sex: "女" },
      { name: "李清思", sex: "女" },
      { name: "劉小華", sex: "男" },
      { name: "陳忠忠", sex: "男" }
      ];
    }]);
  </script>
</body>
</html>

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

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

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

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

當(dāng)前名稱：AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼
標(biāo)題鏈接：http://aaarwkj.com/article48/jejehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、微信小程序、Google、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼

AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼