AngularJS點擊添加樣式、點擊變色設置的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:33:52

AngularJS點擊添加樣式、點擊變色設置的實例代碼

AngularJS點擊添加樣式、點擊變色設置的實例代碼:本文介紹了AngularJS點擊添加樣式、點擊變色設置的實例代碼，分享給大家，具體如下：首先解釋需求是這樣的，有個列表，當你點擊哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那么AngularJS如何實現呢？

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJS點擊添加樣式、點擊變色設置的實例代碼:本文介紹了AngularJS點擊添加樣式、點擊變色設置的實例代碼，分享給大家，具體如下：首先解釋需求是這樣的，有個列表，當你點擊哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那么AngularJS如何實現呢？

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

首先解釋需求是這樣的，有個列表，當你點擊哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那么AngularJS如何實現呢？

下面我們看代碼部分

<!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>序號</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、首先，第一個< li >元素的"ng-class"值與"bold"屬性值綁定,使得該值指定的樣式加粗，這個相信大家都能看懂；

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

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

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

③因此當單擊某行< li >元素時,"focus"屬性值將變為相應的"$index"；

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

⑤此時您應該明白了，"ng-class"的樣式指令值變為"focus";

⑥經過上面的分析及操作，我們實現了單擊< li >元素時,添加背景樣式的效果.

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com