Question

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. 其它属性控制</h3>

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