angularjs 控制style

ng-if="curtab==tab1" ng-style="{color: #4596CE;}"

或

 ng-style="{color: myColor}"

在angular中为我们提供了3种方案处理class：
1：scope变量绑定，如上例。（不推荐使用）
2：字符串数组形式。
3：对象key/value处理。

1、scope变量绑定例子：

function ctr($scope){
   $scope.test =“classname”;
}

<div class=”{{test}}”></div>

2、 字符串数组形式

function Ctr($scope) { 
    $scope.isActive = true;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

其结果是2中组合，isActive表达式为true，则 active，否则inactive。

3、对象key/value例子

<div ng-class {'selected': isSelected, 'car': isCar}">
</div> 

当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，
所以你结果可能是4种组合。

个人推荐用2，3两种方式

angularjs 常用样式相关指令：

• ng-class - use when the set of CSS styles is static/known ahead of time
• ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
• ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
• ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
• ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
• ng-disabled and ng-readonly - use to restrict form element behavior
• ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations