[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 ...
随机推荐
- codevs 2669 简单的试炼
2.codevs 2669 简单的试炼 题目描述 Description 已知一个数S,求X和Y,使得2^X+3^Y=S. 输入描述 Input Description (多组数据) 每行一个整数 ...
- 深究Spring中Bean的生命周期
前言 这其实是一道面试题,是我在面试百度的时候被问到的,当时没有答出来(因为自己真的很菜),后来在网上寻找答案,看到也是一头雾水,直到看到了<Spring in action>这本书,书上 ...
- Angular 路由⑦要素
cnzt http://www.cnblogs.com/zt-blog/p/7919185.html http://www.cnblogs.com/zt-blog/p/7919185.ht ...
- 基于R-Tree的最近邻查询
转自基于R-Tree的最近邻查询 BAB(Branch.and.Band)算法是由Nick Roussopoulousnl等人于1995年提出的,是最早的基于R.树的静态最近邻查询算法.该算法使用MI ...
- ios Crash Log 分析汇总
方法一: 1.xcode 有自带的symbolicatecrash,可以将.crash文件中的16进制地址转换成可读的函数地址. symbolicatecrash位于: /Applications/X ...
- Info.plist 的字段解释
bundle字段 这些字段名都是XML中的名称,在xcode的属性编辑器中,名字并不相同 bundle目录中的属性列表详细描述了有关该bundle的信息.Finder和一些系统API在一些情况下会使用 ...
- 【Todo】Spark运行架构
接上一篇:http://www.cnblogs.com/charlesblc/p/6108105.html 上一篇文章中主要参考的是 Link 这个系列下一篇讲的是Idea,没有细看,又看了再下一篇: ...
- 线段树区间更新,区间统计+离散化 POJ 2528 Mayor's posters
题意:有一个非常长的板子(10000000长),在上面贴n(n<=10000)张海报.问最后从外面能看到几张不同的海报. 由于板子有10000000长,直接建树肯定会爆,所以须要离散化处理,对于 ...
- SAP 锁对象 基本概念与基本操作 SE11
一.SAP为什么要设置锁: 1,保持数据的一致性 假设几个用户要訪问相同的资源,须要找到一种同步訪问的方法去保持数据的一致性.比方说,在航班预订系统中,须要检查还有没有空座位,当检 ...
- NDK编译STL
方法: 1.在jni目录下新建Application.mk; 加入 APP_STL := stlport_static 右边的值还可以换成下面几个: system - 使用默认最小的C++运行库, ...