Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用-四川平武建站

新闻中心

这里有您想知道的互联网营销解决方案

Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用

这篇文章主要为大家展示了“Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch怎么用”这篇文章吧。

成都创新互联是专业的怀宁网站建设公司，怀宁接单;提供网站建设、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行怀宁网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

共性

1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法，使用起来非常方便，尤其是做业务逻辑。

2.都是通过一个表达式的值来实现切换显示的，只不过 ng-switch 可以是其他值，ng-if ng-show 就必须是 boolen了。

3.我在使用过程中发现一个小技巧，我们通过表达式设置 ng-if 或者 ng-show 直接在页面中定义一个表达式，这个时候它的值其实是undefined，由于！== true 所以这部分默认也是隐藏。

那么既然是不同指令，就各自有专攻，那我们就来看看他们分别都有什么果实能力。。。(不看海贼的可以无视哈~~)

ng-show/ng-hide

在用原生js 或者 jquery的时候，我们一般都可以定义一个类，通过添加和删除这个类来实现元素的显示和隐藏切换。其实这部分从网上参考资料来看，Angular也是这样实现的，根据表达式正确与否，动态添加或者删除 ng-hide 这个Angualr预先定义好的class。调用方式具体如下：

可以是设置一个变量

也可以是直接使用 true / false

对于变量，我们在js 中直接设置这个值就可以。

这个指令的特性是，即使我们暂时隐藏这部分内容，它也会被dom 渲染。

ng-if

使用方式也是设置一个表达式：

可以是设置一个变量

也可以是直接使用 true / false

对于变量，我们在js 中直接设置这个值就可以。

这是一个能帮我们节省效率的指令，如果表达式值 === false , 则这部分不会在dom中渲染，或者原有的内容会被从dom中删除。所以如果有一部分内容，不需要一开始就显示，我们可以先用ng-if 让它隐藏。例如一个显示更多的下拉按钮，刚开始不显示的部分，可以ng-if 来设置，等我们点击了更多按钮，再设置ng-if = true 既可。这样子减少了页面渲染事件，提高了效率呢。

还有一个特性，ng-if 或创建自己的 scope，它通过原型继承父级的scope。一个典型的例子来自于参考资源1。

还有一个小坑，$scope上面我可以直接给一个属性赋值如：

$scope.showpage = 'abut'

但是如果直接赋值一个对象，对不起，需要先声明，再给对象添加属性

$scope.data = {};
$scope.data.showpage = 'about';

ng-swith

使用方式比前前两个复杂一点，不过也非常直观，类似原生js 中的switch 函数：

在外层父级元素设置 ng-switch 为一个表达式A ，那么他的子元素相当于几个不同的选项，表达式A 对应哪个子元素的 ng-switch-with 值，就显示那部分。

新闻中心

其他资讯