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 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
JQuery中clone方法复制节点
May 18 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
新手vue构建单页面应用实例代码
Sep 18 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
express express-session的使用小结
Dec 12 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 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提取中文首字母
2008/04/09 PHP
PHP 日常开发小技巧
2009/09/23 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Django内容增加富文本功能的实例
2017/10/17 Python
python MySQLdb使用教程详解
2018/03/20 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python Django搭建网站流程图解
2020/06/13 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
应届生财务会计求职信
2013/11/05 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
对孩子的寄语
2014/04/09 职场文书
团日活动总结书
2014/05/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
工作试用期自我评价
2015/03/10 职场文书
小学班级管理心得体会
2016/01/07 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
Python 全局空间和局部空间
2022/04/06 Python