AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例

更新時(shí)間：2017年05月18日 11:44:48 作者：itsonglin

這篇文章主要介紹了AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法,結(jié)合具體實(shí)例形式分析了ng-class操作頁面class樣式的相關(guān)技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS控制器controller正確的通信的方法
AngularJS中的controller是個(gè)函數(shù)，用來向視圖的作用域（$scope）添加額外的功能，我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài)，并添加自定義行為
2016-01-01
AngularJS ui-router (嵌套路由)實(shí)例
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
利用Angularjs和原生JS分別實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動(dòng)態(tài)的效果，這樣對(duì)于用戶體檢來說非常好，這篇文章分別用Angularjs和原生JS兩種方法來實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框，具有一定的參考價(jià)值，有需要的小伙伴們可以來參考借鑒。
2016-09-09
angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular6中使用Swiper的方法示例
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
angularjs中ng-attr的用法詳解
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實(shí)例代碼介紹的很詳細(xì)，有需要的朋友可以參考借鑒，下面來一起看看吧。
2016-12-12
AngularJS實(shí)現(xiàn)的base64編碼與解碼功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的base64編碼與解碼功能,結(jié)合實(shí)例形式分析了AngularJS字符串base64編碼與解碼操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-05-05
AngularJS入門教程之服務(wù)(Service)
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實(shí)例,有需要的小伙伴可以參考下
2016-07-07
詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式
這篇文章主要介紹了詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07