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

如你正使用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. java 约束配置文件和本地约束

    一.寻找spring配置文件约束头(也可直接复制已有的) 1.在本地文件夹解压spring核心包(dist) 例:核心包的约束位置(D:\JavaSources\spring-framework-4. ...

  2. IDEA项目搭建七——使用Feign简化消费者端操作

    一.简介 我们可以看到上一篇文章的消费者这边调用Service时比较麻烦,所以我们可以使用Feign来简化这部分操作,它底层也是使用Ribbon实现的只是Ribbon支持HTTP和TCP两种通信协议, ...

  3. 导入数据到MongoDB中

    import sys import json import pymongo import datetime from pymongo import MongoClient client = Mongo ...

  4. Flume Source 实例

    Flume Source 实例 Avro Source 监听avro端口,接收外部avro客户端数据流.跟前面的agent的Avro Sink可以组成多层拓扑结构. 1 2 3 4 5 6 7 8 9 ...

  5. Python笔记(十四):操作excel openpyxl模块

    (一)  常遇到的情况 就我自己来说,常遇到的情况可能就下面几种: 读取excel整个sheet页的数据. 读取指定行.列的数据 往一个空白的excel文档写数据 往一个已经有数据的excel文档追加 ...

  6. Cannot find wrapper assembly for type library "ADODB". in VS2017

    Delete Microsoft ActiveX Data Objects {version} Library and then add it back. After resolving the pr ...

  7. js计算两个日期的天数差值

    js计算两个日期的天数差值 通过两个日期计算这两个日期之间的天数差值 /** * 计算天数差的函数,通用 * @param sDate1 * @param sDate2 * @returns {Num ...

  8. Hive-1.2.1_03_DDL操作

    Hive官方文档:Home-UserDocumentation Hive DDL官方文档:LanguageManual DDL 参考文章:Hive 用户指南 注意:各个语句的版本时间,有的是在 hiv ...

  9. Hadoop2.7.6_05_mapreduce-Yarn

    1. MAPREDUCE原理 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认 ...

  10. 17秋 软件工程 Alpha展示博客

    成员简介 姓名 个人简介 博客地址 郑世强 郑世强,计算机三班,了解java web端和Android端编程,使用过Spring MVC和Spring Boot开发商业程序,Android端学习了rx ...