[译]ngclass expressions in angularjs

原文： 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="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.10" 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="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.10" 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="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.10" 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>

 

posted @ 2015-06-02 09:29  irocker  阅读(355)  评论(0)  编辑  收藏  举报