Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

前言

最近在做一个项目改版，第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的，感觉非常的新鲜。有几个指令是经常用到的，这里由于这几个有点共性，所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令。下面来看看详细的介绍：

共性

       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。调用方式具体如下：

可以是设置一个变量

<div ng-show='show'></div>

也可以是直接使用 true / false

<div ng-show='true'></div>

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

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

ng-if

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

可以是设置一个变量

<div ng-if='more'></div>

也可以是直接使用 true / false

<div ng-if='true'></div>

对于变量，我们在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 值，就显示那部分。

<div ng-switch='showpart'>
 <div ng-switch-default></div>
 <div ng-switch-with='home'></div>
 <div ng-switch-with='blog'></div>
 <div ng-switch-with='about'></div>
 <div ng-switch-with='contact'></div>
</div>

这也是一个能帮我们节省效率的指令。和ng-if 一样，一开始如果不等于父级的 ng-switch 表达式的值，则不会在页面渲染的，而且我们也可以通过 ng-switch-default 来设置默认的显示部分。比如以往常见的 Tab 选项卡，用这个指令实现起来就非常的容易。

这里有一点疑问，因为我在项目中，做的单页面应用，所有不同部分都在一个页面里面。那么我经常需要根据不同的ajax返回值，显示不同的部分，（特殊原因不能使用路由），所以我这里就是用的 ng-switch 指令，根据不同返回值，显示不同部分。虽然也能实现按需显示，但看到有文章说这样使用 ng-switch 并不是很妥当，路过的朋友，有了解的可以指点我一下！我在这先谢过了~~

后面我会继续分享Angular在项目开发中的经验，以及遇到的坑！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# angularjs  # ng  # hide  # switch  # angular  # JS中比Switch...Case更优雅的多条件判断写法  # mui js控制开关状态、修改switch开关的值方法  # layui--js控制switch的切换方法  # JS switch判断 三目运算 while 及 属性操作代码  # AngularJS基础 ng-switch 指令简单示例  # javascript中if和switch  # ==和===详解  # JavaScript中switch语句的用法详解  # js switch case default 的用法示例介绍  # js 中的switch表达式使用示例  # JavaScript switch语句使用方法简介  # 这部  # 都是  # 我在  # 会在  # 还有一个  # 这几个  # 来实现  # 就可以  # 自己的  # 返回值  # 是一个  # 几个  # 有一  # 都有  # 我会  # 也会  # 过了  # 都在  # 尤其是  # 在这 

相关文章： 如何在阿里云虚拟服务器快速搭建网站？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  如何基于云服务器快速搭建网站及云盘系统？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  建站之星CMS五站合一模板配置与SEO优化指南  如何用狗爹虚拟主机快速搭建网站？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  如何在香港免费服务器上快速搭建网站？  如何高效完成自助建站业务培训？  如何用好域名打造高点击率的自主建站？  微信小程序 五星评分(包括半颗星评分)实例代码  如何在建站宝盒中设置产品搜索功能？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  建站主机选择指南：服务器配置与SEO优化实战技巧  学校免费自助建站系统：智能生成+拖拽设计+多端适配  制作网站建设的公司有哪些,网站建设比较好的公司都有哪些？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  如何在阿里云香港服务器快速搭建网站？  网站制作培训多少钱一个月,网站优化seo培训课程有哪些？  如何用低价快速搭建高质量网站？  相册网站制作软件,图片上的网址怎么复制？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  用v-html解决Vue.js渲染中html标签不被解析的问题  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何在自有机房高效搭建专业网站？  如何快速打造个性化非模板自助建站？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  音乐网站服务器如何优化API响应速度？  建站之星如何一键生成手机站？  如何通过二级域名建站提升品牌影响力？  c# 在高并发场景下，委托和接口调用的性能对比  潮流网站制作头像软件下载,适合母子的网名有哪些？  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  如何在万网ECS上快速搭建专属网站？  郑州企业网站制作公司,郑州招聘网站有哪些？  建站主机解析：虚拟主机配置与服务器选择指南  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  制作网站怎么制作,*游戏网站怎么搭建？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  开心动漫网站制作软件下载,十分开心动画为何停播？  建站之星如何助力网站排名飙升？揭秘高效技巧  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  高性能网站服务器部署指南：稳定运行与安全配置优化方案