angularJs工作笔记-ng-class、ng-style的几种用法

今天总结下工作中常用的ng-class的用法

一、ng-repeat列表中的用法

<ul>
 <li 
 ng-repeat="(i,item) in itemArr"
 ng-click="chooseItem(item,$index)" 
 ng-class="{currentState:i==index}">
 {{iterm.name}}
 li>
ul>
<script type="text/javascript">
    $scope.index=0;
    $scope.chooseItem=function(item,index){
        $scope.index=index;
    }
script>

二、对象写法

ng-class=”{‘class1’ : isTrue, ‘class2’ : !isTrue,………………….}”

三、三元表达式写法

ng-class=” obj ? ‘class1 ‘: ‘class2’ “

四、匹配模式-对象写法

ng-class=”{ ‘class1’:style1, ‘class2’:style2, ‘class3’:style3,}[inputClassName]”

---

$scope.style1={
    "font-size":"12px",
    "padding":"12px"
}
$scope.style2={
    "font-size":"16px",
    "padding":"16px"
}
``
$scope.style3={
    "font-size":"20px",
    "padding":"20px"
}`

五、ng-style写法

<span ng-style='obj'></span>
$scope.obj={
    "font-size":"16px",
    "padding":"20px"
}