關於ng-class,ng-style的用法


ng-class的使用幾種方式

(1):利用雙向數據綁定(className根據chang2的值去匹配類)

  <div class="{{className}}">............</div>

  $scope.className="change2";

(2):通過字符串數組的形式

 <div ng-class="{true:'RED',false:'GREEN'}[className]"></div>

 $scope.className=true/false;

當className=true的時候,ng-class=RED,  or GREEN

(3):通過鍵值對的形式

 <div ng-class="{'A':select1,'B':select2,'C':select3}"></div>

 $scope.select3=true;此時的ng-class=C;

ng-style的使用幾種方式

 1)表達式

ng-style="{'font-size':languageType =='en-us'?'12px':'23px'}"
2)綁定對象
 //開戶類型下拉框樣式
 $scope.selectDefaultStyle = {
 "color": "#38270B!important",
 "border": "1px solid #e0e0e0",
 "background": "rgba(224,224,224,.1)",
 "border-radius": "2px",
 "outline": "none",
 "height": "30px",
 "font-size": "14px",
 "padding-left": "5px",
 "width": "120px",
 "margin-right": "10px",
 
 };
<select id="type" ng-model="baseInfo.open_type" ng-options="item.id as item.name for item in openTypeArr" ng-show="isBaseInfoEdit" 
   ng-style="selectDefaultStyle">
</select>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM