標籤：style blog class code java ext
本篇主要介紹通過資料繫結來給元素添加特定的類名,從而應用特定的樣式
從一個最基本的例子來看:
<!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 }}
原始狀態:
點擊一次以後:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
