Angular框架中控制css样式

    Angular中控制样式这话题在之前一篇文章里曾涉及：http://blog.csdn.net/u011649436/article/details/12249457

    现在决定单独拿出来讨论一下。

    

    开/关某个样式是前端编程中一个非常基本的要求，在jquery年代这功能是挺容易完成的：

$('.blablabla').toggleClass('someClass')

    但在angular中，应尽量避免寻找元素；所以，他们提供了"ng-class"这个指令，具体用法如下：
    html中：

<button ng-class="{‘active’: isActive}" ng-click="click()">Click Me</button>

    ng-class的值为一个map，key是class的名字，value为true或false，顾名思义，当true时该样式生效，false则相反；例子中的样式名为"active"，值为$scope中的isActive变量。hg-click则绑定'click'方法。
    controller代码中：

    $scope.isActive = false;
    $scope.click = function() {
      $scope.isActive = ! $scope.isActive
  }

    isActive的默认值为false，当click方法执行时，其值会被toggle，从而改变button的样式。
    再强调一下，ng-class会观察里面的变量（这里是isActive），当后者发生改变时，ng-class会根据其值重新设置元素的样式。