美文网首页
【转】ng-if与ng-show区别以及ng-if会创建子作用域

【转】ng-if与ng-show区别以及ng-if会创建子作用域

作者: 嘉恩188 | 来源:发表于2017-05-11 14:47 被阅读0次

上周有个需求是为了对数据进行更好的筛选,需要设置两个浮动框

点击后显示的内容分别是 各个班组和各个工种,一开始以为是要用两个浮动框,找啊找,找了半天没有找到,然后做成点击不同按钮在同一个浮动框里显示不同的内容,那我自然是想到了ng-if(当时是考虑到不用加载,减少加载?挖了坑自己跳啊)然后用ng-model和filter来进行输入框的筛选显示功能,但是用ng-if把头部head和内容content分开后,虽然能同时显示,但是无法筛选,换成ng-show就行,明明是同时加载dom树的。

经过提问和查阅之后,解释是这样的:官方解释ng-if :表达式内值为true是,生成标签内的DOM,否则移除官方解释ng-show:表达式内值为true是,显示标签内的DOM,否则隐藏。ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点。ng-if 表达式内的值初始为false的时候 他里面的由input的 model绑定的scope是不会存在作用域里面的,当if的值为true的时候,相当于生成了一个新的SCOPE值,但是原先的watch仍然是检测不到新生成的model的值的,这种情况我暂时用了show来处理,因为即使show的值为false是,改scope也是存在于作用域当中的;

相关文章

  • 【转】ng-if与ng-show区别以及ng-if会创建子作用域

    上周有个需求是为了对数据进行更好的筛选,需要设置两个浮动框 点击后显示的内容分别是 各个班组和各个工种,一开始以为...

  • #10 ng-if 和 ng-show

    ng-if && ng-show 区别 原文地址 先看代码: Code1 -- ng-if Code2 -- ng...

  • 2018-03-15 ng-if 与 ng-show/hide

    第一组: 第二组:叶佳意 ng-if 与 ng-show/hide 的区别 区别一,ng-if 在后面表达式为 ...

  • angular之面试题

    Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...

  • AngularJS 常见面试问题

    AngularJS 常见面试问题 1. ng-if 跟 ng-show/hide 的区别有哪些? ng-if在后面...

  • 总结十个Angular.js由浅入深的面试问题

    一、ng-show/ng-hide 与 ng-if的区别?我们都知道ng-show/ng-hide实际上是通过di...

  • 面试题

    vue和angular的区别? ng-if和ng-show的区别? 闭包 DOM操作 性能优化 sessionSt...

  • Angular 面试题

    ng-if跟ng-show/hide的区别有哪些? 1.ng-if在表达式为true的时候才创建DOM节点,ng-...

  • ng-if

    ng-if会(隐式地)产生新作用域,ng-switch、 ng-include等会动态创建一块界面的也是如此。这样...

  • AngularJs 问题总结

    一、ng-if/ng-show 最根本的区别是页面是否会生成此DOM元素 二、ng-repeat迭代数组的时候,如...

网友评论

      本文标题:【转】ng-if与ng-show区别以及ng-if会创建子作用域

      本文链接:https://www.haomeiwen.com/subject/zsyvtxtx.html