7.3. 节点控制

    7.3.1. 样式 ng-style


    可以使用一个结构直接表示当前节点的样式：

    1.   <div ng-style="{width: 100 + 'px', height: 100 + 'px', backgroundColor: 'red'}">
        </div>


    同样地，绑定一个变量的话，威力大了。

    7.3.2. 类 ng-class


    就是直接地设置当前节点的类，同样，配合数据绑定作用就大了：

    1.   <div ng-controller="TestCtrl" ng-class="cls">
        </div>


    ng-class-even 和 ng-class-odd 是和 ng-repeat 配合使用的：

    1.   <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 的指令：

    1.   <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 是根据一个值来决定哪个节点显示，其它节点移除：

    1.   <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 属性：

    1.   <img ng-src="{{ 'h' + 'ead.png' }}" />


    ng-href 控制 href 属性：

    1.   <a ng-href="{{ '#' + '123' }}">here</a>


    总的来说：


    • ng-src src属性

    • ng-href href属性

    • ng-checked 选中状态

    • ng-selected 被选择状态

    • ng-disabled 禁用状态

    • ng-multiple 多选状态

    • ng-readonly 只读状态


    注意： 上面的这些只是单向绑定，即只是从数据到展示，不能反作用于数据。要双向绑定，还是要使用 ng-model 。