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會根據其值重新設置元素的樣式。