AngularJS中ng-class用法實例分析
更新時間：2017年07月06日 10:36:16 作者：Annexu1991
這篇文章主要介紹了AngularJS中ng-class用法,結合實例形式分析了ng-class的功能、使用方法與相關注意事項,需要的朋友可以參考下
本文實例講述了AngularJS中ng-class用法。分享給大家供大家參考，具體如下：
使用 ng-class 動態(tài)設置元素的類，方法是綁定一個代表所有需要添加的類的表達式。重復的類不會添加。當表達式發(fā)生變化，先前添加的類會被移除，新類會被添加。
在angular中為我們提供了3種方案：
① 通過數(shù)據(jù)的雙向綁定（不推薦使用）
② 通過對象數(shù)組。
③ 通過key/value
一、通過數(shù)據(jù)雙向綁定：
function changeClass(){
$scope.className = "change2";
}
<div class="{{className}}"></div>
二、通過字符串數(shù)組的形式來改變
<div ng-controller="firstController">
<div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className=true;
})
</script>
三、通過key/value
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>
說明：當isSelected為真的時候則添加class ‘selected' 當isCar為真的時候則添加class ‘car'
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
AngularJS實現(xiàn)與后臺服務器進行交互的示例講解
今天小編就為大家分享一篇AngularJS實現(xiàn)與后臺服務器進行交互的示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎資料進行詳細介紹,并附代碼實例,有興趣的小伙伴可以參考下2016-08-08
angularJS與bootstrap結合實現(xiàn)動態(tài)加載彈出提示內容
這篇文章主要介紹了angularJS與bootstrap結合實現(xiàn)動態(tài)加載彈出提示內容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
這篇文章主要介紹了詳解Angular cli配置過程記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
angular項目中bootstrap-datetimepicker時間插件的使用示例
這篇文章主要介紹了angular項目中bootstrap-datetimepicker時間插件的使用示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
angular+bootstrap的雙向數(shù)據(jù)綁定實例
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
本文主要介紹AngularJs Forms，這里整理了相關資料及簡單示例代碼，有需要的朋友可以參考下2016-09-09
這篇文章主要介紹了在 Angular中 使用 Lodash 的方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了angular+ionic返回上一頁并刷新頁面,需要的朋友可以參考下2017-08-08