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更改class和id的方法
Oct 10 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
微信小程序实现聊天室功能
Jun 14 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输出xml格式字符串(用的这个)
2012/07/12 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Django之腾讯云短信的实现
2020/06/12 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
技术经济专业求职信
2014/09/03 职场文书
2015年调度员工作总结
2015/04/30 职场文书
话题作文之自信作文
2019/11/15 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS