AngularJS使用ng-class動態(tài)增減class樣式的方法示例
更新時間：2017年05月18日 11:44:48 作者：itsonglin
這篇文章主要介紹了AngularJS使用ng-class動態(tài)增減class樣式的方法,結(jié)合具體實例形式分析了ng-class操作頁面class樣式的相關技巧,需要的朋友可以參考下
本文實例講述了AngularJS使用ng-class動態(tài)增減class樣式的方法。分享給大家供大家參考，具體如下：
使用ng-class可以實現(xiàn)動態(tài)地增減樣式：
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.js"></script>
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope)
{
}]);
</script>
<style>
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
</style>
</head>
<body>
<div>
<p ng-class="{strike: deleted, bold: important, red: error}">通過映射的方式</p>
<input type="checkbox" ng-model="deleted">添加strike樣式<br>
<input type="checkbox" ng-model="important">添加bold樣式<br>
<input type="checkbox" ng-model="error">添加錯誤樣式
<hr>
<p ng-class="style">使用字符串的方式</p>
<input type="text" ng-model="style" placeholder="輸入 bold、 strike 或 red">
<hr>
<p ng-class="[style1, style2, style3]">使用數(shù)組的方式</p>
<input ng-model="style1" placeholder="輸入: bold, strike 或 red"><br>
<input ng-model="style2" placeholder="輸入: bold, strike 或 red"><br>
<input ng-model="style3" placeholder="輸入: bold, strike 或 red"><br>
<hr/>
</div>
</body>
</html>
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
AngularJS控制器controller正確的通信的方法
AngularJS中的controller是個函數(shù)，用來向視圖的作用域（$scope）添加額外的功能，我們用它來給作用域?qū)ο笤O置初始狀態(tài)，并添加自定義行為2016-01-01
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
利用Angularjs和原生JS分別實現(xiàn)動態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動態(tài)的效果，這樣對于用戶體檢來說非常好，這篇文章分別用Angularjs和原生JS兩種方法來實現(xiàn)動態(tài)效果的輸入框，具有一定的參考價值，有需要的小伙伴們可以來參考借鑒。2016-09-09
angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實例代碼介紹的很詳細，有需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
AngularJS實現(xiàn)的base64編碼與解碼功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的base64編碼與解碼功能,結(jié)合實例形式分析了AngularJS字符串base64編碼與解碼操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了詳解@angular/cli 改變默認啟動端口兩種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07