[angularJS]ng-hide|ng-show切换
<div class="row ng-scope">
<div class="col-lg-12">
<h1 class="page-header">详细信息</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<div class="panel panel-default">
<div class='panel-heading'>
<div class="btn-group pull-right">
<a ng-click="selectType=1" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></a>
<a ng-click="selectType=0" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span></a>
</div>个人资料
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 panel-body">
<div class="form-group">
<div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType" ng-class="{'todo-complete': item.complete}">
<p>{{user.model.username}}</p>
</div> <div class='todo-item' ng-show="selectType">
<input type="text" class="form-control" ng-model="user.model.username" ng-class="{'todo-complete': item.complete}"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 panel-body">
<div class="form-group">
<div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType">
<p>{{user.model.email}}</p>
</div> <div class='todo-item' ng-show="selectType">
<input type="email" class="form-control" ng-model="user.model.email" required/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 panel-body">
<div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType">
<p>******</p>
</div> <div class='todo-item' ng-show="selectType">
<input type="password" ng-model="user.model.password" placeholder='Reset User password' required/>
</div>
</div>
</div>
</div>
通过修改selectType切换ng-hide,ng-show改变内部文本
[angularJS]ng-hide|ng-show切换的更多相关文章
- angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location
参考: https://docs.angularjs.org/api/ng/service/$location
- AngularJS实现可伸缩的页面切换
AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...
- 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 ...
- Angularjs checkbox的ng属性
angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...
- 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"
项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- [Ng]Angular应用点概览
1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...
- ng指令之 ng-class 篇
1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- ng环境搭建步骤
1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...
随机推荐
- word2013 交叉引用添加参考文献的尾注编号,通过查找 ^# 替换为 [^&] 的方式添加中括号,在进行“更新域”操作后,中括号消失。
word2013 交叉引用添加的尾注编号,通过查找 ^# 替换为 [^&] 的方式添加中括号,用这个方法添加中括号很多次了,这次却出现问题:在进行“更新域”操作后,中括号消失. 详 ...
- BZOJ——1202: [HNOI2005]狡猾的商人
http://www.lydsy.com/JudgeOnline/problem.php?id=1202 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: ...
- ROS之:log文件
1.log文件的位置: log file: /home/wang/.ros/log/... 1)显示隐藏文件(.文件),Ctrl+h 2)该文件夹下的文件夹是运行launch文件产生的 3)该文件夹下 ...
- 【转载】容器技术 & Docker & 与虚拟化的比较
看到10月份天天写博客,只有一天没写,非常棒! 11月份也基本每天都写,现在看到有三天没加新博客,应该是之前挖的坑太多了,需要填坑,呵呵. 那这篇文章是不是为了占坑呢?哈哈.我不说话. 容器技术,这篇 ...
- 转:一个android开发者独立开发社交app全过程
http://www.cnblogs.com/linguanh/p/5683069.html
- 用Perl发送邮件小例子
据传,Perl发送邮件有很多方案,但我只会用Mail::Sender这种方式,也就只能简单谈谈这种方式. 在参考众多网页后,程序书写如下: #!/usr/bin/perl -w use Mail::S ...
- CMS - 认识目录
Tips:如果网页图片(文字)看不清,请按CTRL+鼠标滚轮 一个完整的小程序模板目录结构如下! 本章节给出的建议: 1.推荐使用flex布局 2.其它图片路径建议引入网络路径(tabBar不支持网络 ...
- C++中结构和类的区别
首先从从语言角度来看,c语言是一种结构化的语言,便于按照模块化的方式来组织程序,易于程序员的调试和维护,而对于c++来说,我么可以认为它是标准c的超集.实际上所有的c程序也是c++程序.但两者之间还是 ...
- C#读取指定路径下的Config配置文件
ExeConfigurationFileMap map = new ExeConfigurationFileMap(); map.ExeConfigFilename = @"F:\App1. ...
- NVIDIA---CUDA
http://en.wikipedia.org/wiki/CUDA CUDA From Wikipedia, the free encyclopedia CUDA Developer(s) N ...