Angular：ng-style,ng-class的使用

1.ng-style

ng-style 属性用来设置元素的style属性的css值

<input type="button" value="set background" ng-click="myStyle={'background-color':'blue', color: 'black'}">
<span ng-style="myStyle">Sample Text</span>
3//$scope.myStyle={'background-color':'blue', color: 'black'};
4//ng-style="myStyle"

ng-style 行内写法

 <!--ng-style="{'border-color':((form['PlanTitle'+$index].$dirty || form.$submitted) && form['PlanTitle'+$index].$error)?'red':''}"-->  

2.ng-class

ng-style 属性用来设置元素的class属性的值

2.1  用法1：ng-class="{false:'ystep-step-done',true:'ystep-step-active'}[model.style]"

<span ng-repeat="s in steps track by $index">
    <li ng-class="{false:'ystep-step-done',true:'ystep-step-active'}[s.style]">{{s.name}}</li>
</span>
4//ng-class="{false:'ystep-step-done',true:'ystep-step-active'}[s.style]"

2.2  用法2：ng-class="[style1, style2, style3]"

<p ng-class="[style1, style2, style3]"></p>

<script>
$scope.style1="";//填写样式中定义好的名称
$scope.style2="";
$scope.style3="";
</script>

2.3 用法3：适合需要添加多个类——》：ng-class="{className1:isShow1,className2: isShow2,className3:isShow3}"

<p ng-class=“{className1:isShow1,className2:isShow2,className3:isShow3}"></p>
<script>
$scope.isShow1=true;
$scope.isShow2=true;
$scope.isShow3=false;
</script>

2.4 用法4：ng-class="{{myclass}}"   

<div ng-class="{{myclass}}"></div>

<script>
$scope.myclass="myClassName"
</script>