Angular框架中控制css样式

http://blog.youkuaiyun.com/u011649436/article/details/12744475

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

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

    

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

[javascript]  view plain copy

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

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

[html]  view plain copy

1. <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代码中：

[javascript]  view plain copy

1. $scope.isActive = false;  
2. $scope.click = function() {  
3.   $scope.isActive = ! $scope.isActive  

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