<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<button type="button" class="btn btn-success btn-sm"data-ng-click="toggle()">隐藏/显示</button><br /><br />
<form class="form-horizontal" data-ng-hide="myVar">
名：<input type="text" data-ng-model="fName" /><br />
姓：<input type="text" data-ng-model="lName" /><br /><br />
<p>{{fName+" "+lName}}</p>
</form>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope) { $scope.fName = "Visual"; $scope.lName = "Studio 2015"; $scope.myVar = false; $scope.toggle = function () { $scope.myVar =!$scope.myVar}})
</script>
</body>
</html>

data-ng-hide 指令的更多相关文章

  1. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  2. Part 14 ng hide and ng show in AngularJS

    ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...

  3. ng 指令的自定义、使用

    1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...

  4. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  5. vue之指令篇 ps简单的对比angular

    这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...

  6. [Ng]Angular应用点概览

      1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...

  7. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  8. angular指令（二）--内置指令

    一.基础ng 属性指令:  ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-styl ...

  9. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  10. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

随机推荐

  1. 配置phpstudy+phpstorm+xdebug环境

    phpstorm版本: phpstudy版本: 具体的debug配置流程其实phpstorm里面已经明确的说过了,就是下图所示 所以 第一步: 首先要在phpstudy中开启xdebug扩展,所以要修 ...

  2. C++程序设计基础（8）main函数

    注:读<程序员面试笔记>笔记总结 1.知识点 (2)main函数的形式 //first type int main() //second type int main(int argc,ch ...

  3. 用ping命令简单的测试 延时、抖动、丢包率

    在DOS命令状态下输入 :ping 202.105.135.211 -t (连续的对该IP地址执行Ping命令,直到被用户以Ctrl+C中断)就会得到下面的结果:Pinging 202.105.135 ...

  4. 事件代理总结： 已经有一些使用主流类库的事件代理示例出现了，比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子，比如说Usable Type blog上的这一个。一旦需要的话，事件代理将是你工具箱里的一件得心应手的工具，而且它很容易实现。

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...

  5. TD不换行 nowrap属性

    表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行.当然可 ...

  6. Java复习之Eclipse快捷键大全

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  7. LaTeX 修订

    LaTeX多人协同编辑的时候,修订起来与word相比较而言麻烦一些.不过随着技术的发展和需求的增多,会有越来越多的工具支持LaTeX的修订. (1)在线LaTeX ShareLaTeX是一个很优秀的在 ...

  8. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

  9. 介绍一款web端的截图工具

    牛牛截图,web端的一款截图工具,下面是代码及实例. 依赖jquery-1.7.min.js /**************************************************** ...

  10. Java的输入/输出操作

    Java的输入\输出机制 计算机的基本功能就是通过输入输出设备与外部其他设备尽心数据的交互,从其他设备读入数据叫做输入操作,将计算机内的数据写入到其他设备叫做输出操作.可以向计算机发送数据.又可以接受 ...