angular學習筆記(九)-css類和樣式1

詩&遠方發表於2014-05-09
Angular筆記CSS

本篇主要介紹通過資料繫結來給元素新增特定的類名,從而應用特定的樣式

從一個最基本的例子來看:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>6.1css類和樣式</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    .submit-false {
      background:#efefef; color:#ccc
    }
    button {
      border:1px solid #ccc; outline:0
    }
  </style>
</head>
<body>
  <div ng-controller="ButtonDisable">
    <button class="submit-{{disable}}" ng-click="deActive()">提交</button>
  </div>
</body>
</html>

一個提交的按鈕,點選以後就會被禁用,顯示為灰色:

給button新增類名submit-{{disable}},這樣,disable的改變,就會引起button類名的改變,

當disable變數值為false時,就會拼接成submit-false類名,運用相對應的樣式

function ButtonDisable ($scope){
    $scope.disable = true;
    $scope.deActive = function(){
        $scope.disable = false
    }
}

原始狀態:

點選一次以後:

相關文章