原文： http://blog.xebia.com/2014/01/31/ngclass-expressions-in-angularjs/
ngClass 指令允许你通过databinding一个表达式来动态的设置CSS类.
String Syntax
string syntax非常简单、直接, 下面的代码通过ng-class="text"直接添加一text类到legend元素.
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form role="form">
<fieldset>
<legend ng-class="text">String syntax</legend>
<div class="form-group">
<input class="form-control" ng-model="text" placeholder="Type: text-info, text-warning or text-danger"><br>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Array Syntax
The array syntax类似于string syntax, 但是Array Syntax能让你一次添加多个CSS类到HTML元素(ng-class="[label, text]").
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form role="form">
<fieldset>
<legend ng-class="[label, text]">Array syntax</legend>
<div class="form-group">
<input class="form-control" ng-model="label" placeholder="Type: label-info, label-warning or label-danger"><br>
<input class="form-control" ng-model="text" placeholder="Type: text-muted or text-success"><br>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Map Syntax
map syntax能让你通过逗号分隔键值对设置CSS类. 下面的例子中, 当info的值为true时lable-info会被添加到legend元素. 如果muted的值为true时text-muted会被添加到legend元素.
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<fieldset>
<legend ng-class="{‘label-info‘: info, ‘text-muted‘: muted}">Map syntax</legend>
<div class="form-group">
<input type="checkbox" ng-model="info"> info (apply "label-info" class)<br>
<input type="checkbox" ng-model="muted"> muted (apply "text-muted" class)
</fieldset>
</div>
</div>
</body>
</html>
Undocumented Expression Syntax
下面的例子中, 当controller第一次被调用的时候submitted变量的值为false. 当form提交的时候submitted变量设置为true. 接下来我们检查form是否合法. 如果form非法直接return.
‘use strict‘;
angular.module(‘myApp‘, []).
controller(‘MyAppCtrl‘, function() {
this.submitted = false;
var self = this;
this.submit = function(form) {
self.submitted = true;
if (form.$invalid) {
return;
} else {
// Do something with the form like posting it to the backend
}
}
});
那么我们怎么写一个表达式 如果submmited为true并且input元素的值非法的时候添加一个class.（ng-class="{true: ‘has-error‘}[ctrl.submitted && myForm.myField.$error.required]"）
<!doctype html>
<html ng-app="myApp">
<head>
<link src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.10/angular.min.js"></script>
</head>
<body ng-controller="MyAppCtrl as ctrl">
<div class="container">
<div class="row">
<form class="form-horizontal" name="myForm" novalidate>
<fieldset>
<div class="form-group" ng-class="{true: ‘has-error‘}[ctrl.submitted && myForm.myField.$error.required]">
<label for="myField" class="control-label">My Field</label>
<input type="text" name="myField" class="form-control" id="myField" ng-model="myField" required/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="ctrl.submit(myForm)">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
时间： 2024-08-01 06:14:36