视频网站 wordpress主题,苏州营销网站设计,网页html模板代码,北京网站建设 案例在组合这些ng指令写到一篇文章里的时候#xff0c;基本是有规则的#xff0c;本兽会将功能相似相近的一类整合到一篇文章#xff0c;方便理解和记忆。 这篇的三个指令也都是对DOM元素的操作#xff0c;页面上显示/隐藏的判断#xff0c;添加/移除的判断。 ngIf ngIf指令会… 在组合这些ng指令写到一篇文章里的时候基本是有规则的本兽会将功能相似相近的一类整合到一篇文章方便理解和记忆。 这篇的三个指令也都是对DOM元素的操作页面上显示/隐藏的判断添加/移除的判断。 ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。 格式ng-if“value” value表达式 返回结果为boolean类型。 使用代码 input typebutton valueshow/hide ng-clickshow !show; /div ng-ifshowHello World/div 这里做了个对Hello World 所在的div的显示/隐藏效果。但是如果你打开浏览器开发工具去审查元素会发现这个div是被移除和添加的只留下一个注释“!-- ngIf: show --”在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-appDemo ng-controllertestCtrl as ctrlselect ng-modelctrl.tpl ng-optionsi for i in ctrl.selectoption value0请选择模板/option/selectdiv ng-switch onctrl.tplp ng-switch-defaulttpl-one/pp ng-switch-whentpl-twotpl-two/pp ng-switch-whentpl-threetpl-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时也是个注释就像“!-- ngSwitchWhen: tpl-two --”。这是第二个模板绑定的位置当表达式满足第二个模板的条件那么这里就会被第二个模板的HTML代替并显示到页面。 ngHide/ngShow NgHide/ngShow指令显示或隐藏指定的THML元素。元素的显示隐藏是根据元素上ng-hide的css样式添加删除实现的。 格式ng-hide”value” ng-show”value” value表达式 结果为boolean类型。 使用代码 input typebutton valueshow/hide ng-clickshow !show; /div ng-showshowHello/divdiv ng-hideshowWorld/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;} 转载于:https://www.cnblogs.com/ys-ys/p/4965139.html
