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


Posted in Javascript onMay 07, 2017

前言

最近在做一个项目改版,第一次在项目中真正使用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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
js确定对象类型方法
Mar 30 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
Angular.Js中ng-include指令的使用与实现
May 07 #Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
You might like
PHP递归算法的详细示例分析
2013/02/19 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
使用js简单实现了tree树菜单
2013/11/20 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue的keep-alive用法技巧
2019/08/15 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python实现自动登录百度空间的方法
2017/06/10 Python
Python实现注册登录系统
2017/08/08 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
周年庆促销方案
2014/03/15 职场文书
大学军训的体会
2014/11/08 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书