ng-if / ng-show/ng-hide ng-swith

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-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 选项卡,用这个指令实现起来就非常的容易。

时间: 2024-10-13 18:36:35

ng-if / ng-show/ng-hide ng-swith的相关文章

Part 14 ng hide and ng show in AngularJS

ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example When Hide Salary checkbox is checked, the Salary column should be hidden. When it is unchecked the Salary column should be

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

angularjs中常用的ng指令介绍【转载】

原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提供的或者自定义的标签和属性,用来增强HTML表现力. 标记(markup).即双大括号{{}},可将数据单向绑定到HTML中. 过滤器(filter).用来格式化输出数据. 表单控制.用来增强表单的验证功能. 其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-

嘿!@野兽,你的ng api 掉了 - - angular.forEach

@野兽的 ng api 学习 -- angular.forEach angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引.为函数指定一个可选的上下文. 格式:angular.forEach(obj,iterator,[context]); obj:遍历的对象 iterator:迭代器 [content]: 对象为迭代器函数的上下文(t

java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFil

项目启动时报错:java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter struts2的jar包版本号为2.1.8,所以类名是没有错误的,而jar包确实加入进去了.jar包加入的方式是通过user library. 问题解决的办法是:将jar包拷贝到WEB-INF下lib文件夹目录,重新启动tomcat问题解决. ================

ng build --aot --prod生成文件报错

Cannot read property 'create' of undefined when building with --prod or --aot 解决方案:改变zone.js的版本号为0.8.5: 然后删除dist ng_modules,然后重装下就可以正常使用了. /*更新angular-cli*/npm uninstall -g angular-cli npm cache clean npm install -g @angular/[email protected] /*更新引用r

ng $scope与$rootScope的关系

$scope与$rootScope的关系:①不同的控制器之间 是无法直接共享数据②$scope是$rootScope的子作用域对象$scope的id是随着控制器的加载顺序依次递增,$rootScope的id是1 ③不同控制器之间如何通信??1.借助于$rootScope2.既然子作用域对象可以调用父作用域对象的值或者方法,就可以通过控制器之间的嵌套来实现通信3.事件父->子$scope.$broadcast('eventName',args) 子->父$scope.$emit('eventNa

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

1.先建立一个项目2.在WebRoot中建立一个jsp,名为index.jsp,在里面写一句话 <body> hello struts2 <br> </body> 3.在后台写入代码 public class T { org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter f; } 4.在struts.xml中写入 <constant name="struts.devMo

嘿!@野兽,你的ng api 掉了 - - angular.uppercase和angular.lowercase

@野兽的 ng api 学习 -- angular.uppercase和angular.lowercase angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = "ABCabc"; var upperCase = angular.uppercase(str);//ABCABC angular.lowercase 将指定的字符串转换成小写 格式:ang

ngLazyLoad——让ng项目实现controllers按需异步加载

最初的源码来自:https://github.com/atian25/angular-lazyload/ 但由于一些个人的原因(我有强迫症...)所以把代码的书写风格按照我平日的喜好修改了下 也顺便认真的阅读了一遍源码,按照自己的理解,把原来的英文注释替换成中文的了 毕竟不是原作者,对ng框架也不是特别的熟,注释中的用词可能有不少不正确的地方,欢迎指出 下面是我稍微修改了一下的代码: /* * angular-lazyLoad * 一个angular项目的按需异步加载服务模块 * 支持 [Sea