[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 ...
随机推荐
- Mac OS X 下安装python的MySQLdb模块
参考资料: mac os x下python安装MySQLdb模块 http://www.codeif.com/post/1073/ MAC OSX使用Python安装模块有关问题 http:// ...
- 转 vs2010转vs2008 其他的一样
如果你使用VS2010的任何版本写代码,那么在VS2008中就不能打开VS2010的解决方案了,为此,通过以下三步就可以解决了一.对于工程名.sln; 1.用你喜欢的编辑器打开sln文件,比如note ...
- 高性能JS-DOM
用脚本进行DOM操作的代价是很昂贵的,它是富web应用中最常见的性能瓶颈.主要有以下三种问题: 访问和修改DOM元素 修改DOM元素的样式导致repaint和reflow 通过DOM事件处理与用户进行 ...
- [vxlan] 二 什么是VXLAN
VXLAN是一种mac in UDP的技术.简单讲就是传统的二层帧被封装到了UDP的package中.通过UDP的IP网络发送到目的地然后再解封装. VXLAN 跟VLAN对比,最重要的一个概念就是V ...
- Go -- 漫谈IM通信架构
前前后后做的IM和推送系统已经有好几个了,一直都想好好总结下,因此就有了这篇文章.在我刚学编程的那会儿,觉得网络通信是一个很牛逼和门槛很高的一门技术,但是随着开源技术的发展和互联网知识的共享,现在要写 ...
- vc常用类总结(转载)
常用类 CRect:用来表示矩形的类,拥有四个成员变量:top left bottom right.分别表是左上角和右下角的坐标.可以通过以下的方法构造: CRect( int l, int t, i ...
- 心情日记app总结 数据存储+服务+广播+listview+布局+fragment+intent+imagebutton+tabactivity+美工
---恢复内容开始--- 结果截图如下: 第一张图是程序主界面,主要是显示记事列表的一些个事件.旁边的侧拉框是自己登陆用的.可以设置密码.可以查看反馈与关于等信息. 点击第一张图片下方的图标,会显示不 ...
- 使用 C# 开发智能手机软件:推箱子(四)
这是"使用 C# 开发智能手机软件:推箱子"系列文章的第四篇. 在这篇文章中,介绍 Common/FindPath.cs 源程序文件. using System; using Sy ...
- postgres源码目录结构
1.第一级目录介绍 |_postgres |_aclocal.m4------------config用的文件的一部分 |_config----------------config文件目录 |_con ...
- 2016/06/16 phpexcel
程序部分 require_once './phpexcel/PHPExcel.php'; // 首先创建一个新的对象 PHPExcel object $objPHPExcel = new ...