angularjs之ng-class
AngularJS笔记
<html>
<head>
<base href="/"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
<script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
<title>Document</title>
</head>
<body ng-app="app">
<div ng-controller="CSSCtrl">
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
<button class="btn btn-default" ng-click="showError()">错误</button>
<button class="btn btn-default" ng-click="showWarning()">告警</button>
</div>
</body>
<style>
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("CSSCtrl", function ($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function () {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function () {
$scope.messageText = 'Just a warning. please carry on.';
$scope.isError = false;
$scope.isWarning = true;
}
});
</script>
</html>