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 类
Nov 07 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jquery仿微信聊天界面
May 06 jQuery
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
详解JavaScript 事件流
Sep 02 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue多次循环操作示例
2019/02/08 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python远程连接MySQL数据库
2019/04/19 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python命令 -u参数用法解析
2019/10/24 Python
Python argparse模块应用实例解析
2019/11/15 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
2015年城管个人工作总结
2015/05/15 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL