1.ng-style
ng-style 属性用来设置元素的style属性的css值
1 <input type="button" value="set background" ng-click="myStyle={'background-color':'blue', color: 'black'}"> 2 <span ng-style="myStyle">Sample Text</span>
3//$scope.myStyle={'background-color':'blue', color: 'black'};
4//ng-style="myStyle"
ng-style 行内写法
1 <!--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]"
1 <span ng-repeat="s in steps track by $index"> 2 <li ng-class="{false:'ystep-step-done',true:'ystep-step-active'}[s.style]">{{s.name}}</li> 3 </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>