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

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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值