AngularJS入门(用ng-hide指令实现元素显示和隐藏)

控制html元素显示和隐藏有n种方法:html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom,5行代码搞不定吧,而且毫无技术含量。

看代码:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-show and ng-hide directives</title>
</head>
<body>
<div ng-controller="VisibleController">
    <p ng-show="visible">字符串1</p>
    <p ng-hide="visible">字符串2</p>
    <button ng-click="toggle()">切换</button>
</div>

<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function VisibleController($scope) {
        $scope.visible = false;
        $scope.toggle = function () {
            $scope.visible = !$scope.visible;
        }
    }
</script>
</body>
</html>

两个指令很简单,只是ng-show在true时显示,false时隐藏,而ng-hide效果相反。

时间: 2024-10-05 08:07:14

AngularJS入门(用ng-hide指令实现元素显示和隐藏)的相关文章

jquery中使元素显示和隐藏方法之间的区别

在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方法之间的区别. 1.show()和hide() 使用hide()方法隐藏元素实际上是同时减少元素的高度.宽度以及不透明度,直到这三个属性为0,最后设置元素的css属性disolay:none.show()方法从上到下增大元素的高度,从左到右增大元素的宽度,同时增加内容的不透明度,直至元素完全显示.

HTML元素显示与隐藏

在WEB开发中,前台HTML中经常需要控制元素的隐藏与显示,我们最为最常见是二级导航栏(通过鼠标的移动来触发onmouseover,onmouseout事件来实现二级菜单的显示与隐藏)二级菜单的显示与隐藏. 然而控制元素的影响与显示有两种方式: 1.display : 设置如何及是否显示某元素 2.visibility : 设置元素可见或不可见 Example: <html> <head> <title>HTML元素的显示与隐藏控制</title> <

onclick控制元素显示与隐藏时,点击第一次无反应的原因

代码如下: 1 for(i=0;i<this.aDiv.length;i++){ 2 this.aDiv[i].index=i; 3 this.aDiv[i].oUl=this.aDiv[i].getElementsByTagName('ul')[0]; 4 this.aDiv[i].oUl.aA=this.aDiv[i].oUl.getElementsByTagName('a'); 5 this.aDiv[i].onmousedown=function(){ 6 if(this.oUl.dis

css控制元素显示和隐藏

有dom结构 visibility: visible; //显示 visibility: hidden; //隐藏 没dom结构 display: block; //显示 display: none; //隐藏 原文地址:https://www.cnblogs.com/Hajar/p/11088496.html

angularjs入门-ng-show,ng-hide,ng-if

其实这三个directive很像,用法也大同小异,ng-if是会动态增减元素,ng-show和ng-hide则是把元素显示和隐藏而已,只是用隐藏的方式隐藏起来,就像jquery的$.show()和$.hide()的概念,使用上其实也非常简单,建立一个ng-repeat来说明,我现在只想显示people,其余非人类的全部默认就都不存在,那我就可以使用ng-if的方式,我们也可以想成就像在view上面写if的感觉,如下例子 {{item.name}}-{{item.animalType}} 我们也可

控制页面元素的显示和隐藏

CreateTime--2017年7月13日07:30:55Author:Marydon js控制页面元素的显示和隐藏&<c:if></c:if>标签控制页面元素的显示和隐藏 说明:本文的重点在使用后者实现 实例: 医嘱类型分为:长嘱,临嘱,中医三种,页面默认只显示长嘱信息,点击临嘱或中医显示对应信息:选中变色. CSS部分: /* 医嘱:长嘱,临嘱,中医样式显示 Start*/ .yz_td1 { line-height: 28px; height: 28px; padd

jQuery元素的显示、隐藏及动画

1.hide()    隐藏元素        $("div").hide();            2.show()    显示元素        $("div").show();            3.toggle() 可以切换元素显示与隐藏        $("div").toggle();        4.slideDown() 滑动显示,将隐藏的元素滑动显示出来.        $("div").slideD

jQuery判断元素是否是隐藏的代码

if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document

认识CSS中高级技巧之元素的显示与隐藏

前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素:display:none: 显示元素:display:block:(两层含义:1.显示模式转换为块级元素显示:2.显示元素) display属性缺省默认属性值为:block或者inline,至于选择哪一个交给HTML元素确定,块级元素如<div>.<p>等默认显示为block,行内元素