文档章节

AngularJS笔记3-- ng-show ng-class

奋斗的小芋头
 奋斗的小芋头
发布于 2016/11/22 09:49
字数 347
阅读 8
收藏 0

ng-show / ng-hide

通过绑定一个布尔型的变量,显示或隐藏HTML元素。

当 note.assignee为 true ( 也可以是非空字符串·,非0数字,非空JS对象等)时,assignee所对应的span元素可见。

ng-class

用于选择性的从HTML中添加或者删除CSS class . ng-class指令可接收字符串或对象作为参数

1.参数为字符串:直接把它作为CSS class名称应用到UI中

2.参数是对象,angularJS会检查该对象的每一个属性及它所对应的值, 根据值是false 还是true来决定到底添加还是删除CSS class

本例:参数为对象,包含两个属性:当 note.done为true时,会添加名为 done的 css class 并删除 pending .

反之当note.done为false 时添加pending 删除done

 

<!DOCTYPE html>
<html ng-app="notesApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script src="js/jquery-3.1.1.min.js"></script>
        <style>
            .done{
                background-color:chocolate;     /*巧克力色*/
            }
            .pending{ background-color: aquamarine;}/*蓝绿色*/
        </style>
        </head>
    <body ng-controller="MainCtrl as ctrl">
        <div ng-repeat=" note in ctrl.notes" ng-class=" ctrl.getNoteClass(note.done)">

<!--第三个为done属性,其余为pending-->
            <span class="label">{{note.label}}</span>
            <span class="assignee"
                ng-show="note.assignee"  <!--第一个第四个不为空-->
                ng-bind="note.assignee"></span>
            <span></span>
        </div>
        <script>
            angular.module('notesApp',[]).controller('MainCtrl',[
            
            function(){
                var self=this;
                self.notes=[
                {label:'first',done:false,assignee:'Shyam'},
                {label:'second',done:false},
                {label:'third',done:true},
                {label:'last',done:false,assignee:'brad'}];
                
                self.getNoteClass=function(status){
                    return{   <!--对象-->包含两个属性
                        done:status,
                        pending: !status
                    }

                }
            }])
        </script>
    </body>
</html>

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
3.5K
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
2018/05/08
0
0
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
68.2K
7
angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比
2015/11/15
273
1
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
2018/05/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部