在程序设计过程,我们需要把某一元素或是或一块进行显示与隐藏。

如你正使用angularjs的话,就可以使用ng-show或者ng-hide来进行控制。

var showhideApp = angular.module('showhideApp', []);

Source Code

定义控制器,其中编写2个铵钮的事件:

showhideApp.controller('showhideController', function ($scope) {
$scope.IsVisibled = false; $scope.ShowDivTag = function () {
$scope.IsVisibled = true;
} $scope.HideDivTag = function () {
$scope.IsVisibled = false;
}
});

Source Code

html代码:

<div ng-app="showhideApp" ng-controller="showhideController">
<div>
<input type="button" value="ShowDivTag" ng-click="ShowDivTag()" />
<input type="button" value="HideDivTag" ng-click="HideDivTag()" />
</div>
<div>
<div ng-show="IsVisibled">Insus.NET</div>
</div>
</div>

Source Code

预览:

练习ng-show和ng-hide的方法的更多相关文章

  1. 在ng中的select的使用方法的讲解

    项目中我们可能会使用到条件过滤选择框之类的东西,最简单的就是input.select. 关于select的使用我们通常会需要从数据库中返回数据进行动态绑定. 此时我们会有两种方式: 1)使用ng-re ...

  2. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

  3. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  6. How to Pronounce the Letters NG – No Hard G

    How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...

  7. angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

  8. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  9. Flume NG高可用集群搭建详解

    .Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...

  10. FLUME NG的基本架构

    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...

随机推荐

  1. 即时消息服务框架(iMSF)应用实例之分布式事务三阶段提交协议的实现

    一,分布式事务简介 在当前互联网,大数据和人工智能的热潮中,传统企业也受到这一潮流的冲击,纷纷响应国家“互联网+”的战略号召,企业开始将越来越多的应用从公司内网迁移到云端和移动端,或者将之前孤立的IT ...

  2. “此flash与您的地区不兼容”

    胡萝卜周:Adobe Flash Player AX/NP/PP 31.0.0.122 特别版 https://pan.baidu.com/s/1FMjJxhyJ2Qc1apbKRCtS3A 安装后还 ...

  3. Python:GUI之tkinter学习笔记2界面布局显示

    相关内容: pack 介绍 常用参数 使用情况 常用函数 grid 介绍 常用参数 使用情况 常用函数 place 介绍 常用参数 使用情况 常用函数 首发时间:2018-03-04 14:20 pa ...

  4. 自动化测试基础篇--Selenium Python环境搭建

    学习selenium python需要的工具: 1.浏览器 2.Python 3.Selenium 4.FireBug(Firefox) 5.chromedriver.IEDriverServer.g ...

  5. owncloud 实现私有云进行多端文件同步

    研究生生涯开始了,事情逐渐多了起来.都没时间写博客了... 开学实验室配了台电脑,我把主机装上了Fedora 作为我的服务器.平时有些实验室的材料,经常几个电脑一起看,使用U盘拷来拷去很是麻烦.今天重 ...

  6. 50个常用sql语句 网上流行的学生选课表的例子

    50个常用sql语句 建表: --学生表tblStudent(编号StuId.姓名StuName.年龄StuAge.性别StuSex) --课程表tblCourse(课程编号CourseId.课程名称 ...

  7. elasticsearch版本控制及mapping映射属性介绍

    学习elasticsearch不仅只会操作,基本的运行原理我们还是需要进行了解,以下内容我讲对elasticsearch中的基本知识原理进行梳理,希望对大家有所帮助! 一.ES版本控制 1.Elast ...

  8. 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  9. c++11の的左值、右值以及move,foward

    左值和右值的定义 在C++中,可以放到赋值操作符=左边的是左值,可以放到赋值操作符右边的是右值.有些变量既可以当左值又可以当右值.进一步来讲,左值为Lvalue,其实L代表Location,表示在内存 ...

  10. (3)HomeAssistant 连接MQTT

    整体说明 1 自己在阿里云上搭建MQTT服务器 2 自己笔记本电脑windos10搭建HASS,配置参数连接阿里云服务器 3 手机下载MQTT调试助手,当测试端 4手机当终端---阿里云MQTT--- ...