AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例
本文實(shí)例講述了AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法。分享給大家供大家參考,具體如下:
使用ng-class
可以實(shí)現(xiàn)動(dòng)態(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">添加錯(cuò)誤樣式 <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>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- 詳解AngularJS ng-class樣式切換
- AngularJS表格樣式簡單設(shè)置方法示例
- AngularJs定制樣式插入到ueditor中的問題小結(jié)
- Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
- Angular5給組件本身的標(biāo)簽添加樣式class的方法
- Angular使用動(dòng)態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例
- angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法
- AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例
- AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
相關(guān)文章
AngularJS入門教程之?dāng)?shù)據(jù)綁定用法示例
這篇文章主要介紹了AngularJS之?dāng)?shù)據(jù)綁定用法,結(jié)合實(shí)例形式分析了AngularJS基于內(nèi)置指令ng-model實(shí)現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下2016-11-11詳解使用angular框架離線你的應(yīng)用(pwa指南)
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用(pwa指南),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼
分頁是很多web應(yīng)用都會(huì)用到的,本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12Angularjs實(shí)現(xiàn)多圖片上傳預(yù)覽功能
這篇文章主要介紹了Angularjs實(shí)現(xiàn)多圖片上傳預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07