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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
javascript 继承实现方法
Aug 26 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
前端面试知识点目录一览
Apr 15 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
smarty中js的调用方法示例
2014/10/27 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
JS实现随机抽取三人
2019/11/06 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现机器人行走效果
2018/01/29 Python
Python多进程fork()函数详解
2019/02/22 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
jupyter notebook 重装教程
2020/04/16 Python
python实现逻辑回归的示例
2020/10/09 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
优秀部门获奖感言
2014/02/14 职场文书
降消项目实施方案
2014/03/30 职场文书
会计工作检讨书
2015/02/19 职场文书