### 7.3. 節點控制 ### 7.3.1. 樣式 ng-style 可以使用一個結構直接表示當前節點的樣式： <div ng-style="{width: 100 + 'px', height: 100 + 'px', backgroundColor: 'red'}"> </div> 同樣地，綁定一個變量的話，威力大了。 ### 7.3.2. 類 ng-class 就是直接地設置當前節點的類，同樣，配合數據綁定作用就大了： <div ng-controller="TestCtrl" ng-class="cls"> </div> _ng-class-even_ 和 _ng-class-odd_ 是和 _ng-repeat_ 配合使用的： <ul ng-init="l=[1,2,3,4]"> <li ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">{{ m }}</li> </ul> 注意里面給的還是表示式，別少了引號。 ### 7.3.3. 顯示和隱藏 ng-show ng-hide ng-switch 前兩個是控制 _display_ 的指令： <div ng-show="true">1</div> <div ng-show="false">2</div> <div ng-hide="true">3</div> <div ng-hide="false">4</div> 后一個 _ng-switch_ 是根據一個值來決定哪個節點顯示，其它節點移除： <div ng-init="a=2"> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div> h3 style=" font-size: small; margin: 0 auto; text-shadow: 1px 1px 1px gray; padding: 2px; color: #555;">7.3.4. 其它屬性控制 _ng-src_ 控制 _src_ 屬性： <img ng-src="{{ 'h' + 'ead.png' }}" /> _ng-href_ 控制 _href_ 屬性： <a ng-href="{{ '#' + '123' }}">here</a> 總的來說： - _ng-src_ src屬性 - _ng-href_ href屬性 - _ng-checked_ 選中狀態 - _ng-selected_ 被選擇狀態 - _ng-disabled_ 禁用狀態 - _ng-multiple_ 多選狀態 - _ng-readonly_ 只讀狀態 **注意：** 上面的這些只是單向綁定，即只是從數據到展示，不能反作用于數據。要雙向綁定，還是要使用 `ng-model` 。