AngularJs 中的ng-if ng-swith ng-bind-template

华子航
2023-12-01

ng-if和ng-show、ng-hide的本质区别就是,ng-if是真的移除元素而不是通过css来隐藏元素。大家可以来看页面解析之后的代码来对比,eg:

  <!--ng-if如果ng-if的值是false的话,那么可以移除元素,而不是像ng-hide和ng-show那样的去隐藏元素-->
        <!-- 查看源码的时候会发现,不显示的部分并不是通过css来隐藏的,而是默认的就给注释掉了 -->
        <div>
            <span ng-if="1!=1">default</span>
            <span ng-if="remove">other</span>
            <span ng-if="!remove">another</span>
        </div>


ng-switch跟所有的控制语句一样,用来控制显示什么的,它的显示效果跟ng-if类似,也是移除(Ps:注释掉了),并不是隐藏,ng-switch要跟on来连用,如果等于特定值需要使用

ng-switch-when来控制是否显示,具体代码如下:

  <input type="text" ng-model="when" />
        <div ng-switch on="when">
            <p ng-switch-default>default value</p>
            <p ng-switch-when="when"><b>other value</b></p>
        </div>

ng-bind-template可以绑定多个值,这个是跟ng-bind的区别,eg:

 <div ng-init="sex='男'">
            <!--使用ng-bind-template可以绑定多个字段,而不是像ng-bind绑定一个字段。-->
            <div ng-init="name='jy'" ng-bind-template="{{name}}{{sex}}">
            </div>
 </div>


 类似资料: