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

如你正使用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. 探讨PHP页面跳转几种实现技巧 转自# 作者:佚名 来源:百度博客 #

    Web系统中,从一个网页跳转到另一个网页,是LAMP项目中最常用的技术之一.页面跳转可能是由于用户单击链接.按钮等引发的,也可能是系统自动产生的. 此处介绍PHP中常用的实现页面自动跳转的方法. PH ...

  2. onkeypress 在js函数返回false后没有反应

    一.解决方案: 把 onkeypress = "function()" 改为 onkeypress = "event.returnValue=function()&quo ...

  3. Linux 学习笔记之超详细基础linux命令 Part 4

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 3----------------- ...

  4. openCV 色彩空间

    ---恢复内容开始--- 1.使用cv2.inrange()获取某个范围内的图像取值,指定某个通道的最小值和最大值 import numpy as np def color_space(image): ...

  5. Python:GUI之tkinter学习笔记之messagebox、filedialog

    相关内容: messagebox 介绍 使用 filedialog 介绍 使用 首发时间:2018-03-04 22:18 messagebox: 介绍:messagebox是tkinter中的消息框 ...

  6. UEditor单个图片上传遇到的问题记录

    查看了ueditor.all.js得源代码发现单图片上传是在选择文件输入框change事件执行表单Submit,但是出现一个问题请求头没有加入Cookie,导致后端身份认证失败,上传最终失败. ued ...

  7. windows 10 安装TortoiseSVN.msi时报2503的错误

    解释: 出现这个错误的原因是权限不足,右击安装程序也没有“以管理员身份运行”按钮. 解决: 输入 msiexec /package  F:\TortoiseSVN-1.9.7.27907-x64.ms ...

  8. JDBC lesson 1

    https://www.mkyong.com/tutorials/jdbc-tutorials/ 1.jdbc基本概念 Java Database Connectivity (JDBC)是一套提供数据 ...

  9. 【软件工程1916|W(福州大学)_助教博客】团队答辩助教问题记录

    周一进行了团队项目的课堂答辩,结合团队项目报告对团队项目提出了1-2个问题,将问题和团队回答巨鹿如下 那周余嘉熊掌将得队 如何用户保证隐私安全?答:后期考虑,团队中有一个专业是信息安全的,会针对这块提 ...

  10. C#各种对话框

    1.选取文件夹的FolderBrowserDialog fbd = new FolderBrowserDialog();fbd.SelectedPath = "D:\Test";i ...