### 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` 。