Angular 学习系列

Stella981
• 阅读 463

在组合这些ng指令写到一篇文章里的时候,基本是有规则的,本兽会将功能相似相近的一类整合到一篇文章,方便理解和记忆。

这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断。

ngIf

ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。

格式:ng-if=“value”

value:表达式  返回结果为boolean类型。

使用代码:

<input type="button" value="show/hide" ng-click="show = !show;" />
  <div ng-if="show">Hello World</div>

这里做了个对Hello World 所在的div的显示/隐藏效果。但是如果你打开浏览器开发工具去审查元素,会发现这个div是被移除和添加的,只留下一个注释“”在div所在的地方。这个需要和下面的ngShow/ngHide做个区分。也就是说这个指令对DOM的操作是移除出/添加进DOM树了。

ngSwitch

ngSwitch指令可以根据表达式的结果在模板上按条件切换DOM结构。元素内使用ngSwitch而没使用ngSwitchWhen或者ngSwitchDefault指令的将会被保存在模板中。

格式:ng-switch  on=“expression” ng-switch-default  ng-switch-when=“value”

expression: 表达式,返回判断的条件是否成立的boolean值。

value:设置的条件

使用代码:

<div ng-app="Demo" ng-controller="testCtrl as ctrl">  <select ng-model="ctrl.tpl" ng-options="i for i in ctrl.select"> <option value="0">请选择模板</option>  </select>  <div ng-switch on="ctrl.tpl"> <p ng-switch-default>tpl-one</p> <p ng-switch-when="tpl-two">tpl-two</p> <p ng-switch-when="tpl-three">tpl-three</p>  </div>
  </div>

(function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);function testCtrl() {this.select = ["tpl-one", "tpl-two","tpl-three" ];this.tpl = this.select[0];
    };
  }());

ngSwitch根据表达式的成立与否添加对应的内容到写好的HTML位置,而这个位置当表达式为false时也是个注释就像:“”。这是第二个模板绑定的位置,当表达式满足第二个模板的条件,那么这里就会被第二个模板的HTML代替并显示到页面。

ngHide/ngShow

NgHide/ngShow指令显示或隐藏指定的THML元素。元素的显示隐藏是根据元素上ng-hide的css样式添加删除实现的。

格式:ng-hide=”value”   ng-show=”value”

value:表达式 结果为boolean类型。

使用代码:

<input type="button" value="show/hide" ng-click="show = !show;" />
   <div ng-show="show">Hello</div>
   <div ng-hide="show">World</div>

ngShow和ngHide相反。这里把ng-hide的css样式写在下面吧:

   .ng-hide { /&#42; this is just another form of hiding an element &#42;/
     display: block!important; position: absolute; top: -9999px; left: -9999px;
   }
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Karen110 Karen110
2年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Karen110 Karen110
2年前
​一篇文章总结一下Python库中关于时间的常见操作
前言本次来总结一下关于Python时间的相关操作,有一个有趣的问题。如果你的业务用不到时间相关的操作,你的业务基本上会一直用不到。但是如果你的业务一旦用到了时间操作,你就会发现,淦,到处都是时间操作。。。所以思来想去,还是总结一下吧,本次会采用类型注解方式。time包importtime时间戳从1970年1月1日00:00:00标准时区诞生到现在
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这