[译]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>