<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切换的更多相关文章

  1. angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location

    参考: https://docs.angularjs.org/api/ng/service/$location

  2. AngularJS实现可伸缩的页面切换

    AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...

  3. 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 ...

  4. Angularjs checkbox的ng属性

    angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name&q ...

  5. 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"

    项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...

  6. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  7. [Ng]Angular应用点概览

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

  8. ng指令之 ng-class 篇

    1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...

  9. Flume NG Getting Started(Flume NG 新手入门指南)

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  10. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

随机推荐

  1. 洛谷——P1560 [USACO5.2]蜗牛的旅行Snail Trails

    P1560 [USACO5.2]蜗牛的旅行Snail Trails 题目描述 萨丽·斯内尔(Sally Snail,蜗牛)喜欢在N x N 的棋盘上闲逛(1 < n <= 120). 她总 ...

  2. mysql索引底层的数据结构和算法

    1.       为什么要用索引 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要. 索 ...

  3. mysql主从读写分离,分库分表

    1.分表 当项目上线后,数据将会几何级的增长,当数据很多的时候,读取性能将会下降,更新表数据的时候也需要更新索引,所以我们需要分表,当数据量再大的时候就需要分库了. a.水平拆分:数据分成多个表 b. ...

  4. 新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子

    新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子 功劳说不上

  5. vueSSR渲染原理

    优点:利于搜索引擎,解决白屏问题,因为正常情况下在index.html文件中只有一个简单的标签,没有内容,不利于爬虫搜索 场景:交互少,数据多,例如新闻,博客,论坛类等 原理:相当于服务端前面加了一层 ...

  6. 天津政府应急系统之GIS一张图(arcgis api for flex)解说(二)鹰眼模块

    解说GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...

  7. python实现的一个简单的网页爬虫

    学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获 ...

  8. 【转载】一分钟了解两阶段提交2PC(运营MM也懂了)

    上一期分享了"一分钟了解mongoDB"[回复"mongo"阅读],本期将分享分布式事务的一种实现方式2PC. 一.概念 二阶段提交2PC(Two phase ...

  9. 【转载】回调函数(callback)是什么?

    一个很形象的例子: 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这个例子里,你的电话号码就叫回 ...

  10. poj1703 Find them,Catch them 【并查集】

    做过一些的带权并查集,再来做所谓的"种类并查集",发现好像就顿悟了. 种类并查集与带权并查集实质上的区别并不大. 关键的区别就是种类并查集仅仅是带权并查集再弄个%取余操作而已.然后 ...