<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. collection包1.1.0都升级了什么功能

    collection包1.1.0都升级了什么功能 jianfengye/collection(https://github.com/jianfengye/collection) 这个包喜迎第一个子版本 ...

  2. Word中将文本框、图形对象中的文本边距调整

    在进行word的实际使用中,如下图制作流程图时,常常发现文字在图形对象中,老是显示不全,而且上部却空出很多距离.此时可以通过设置形状格式--文本框 --- 上.下编辑进行设置. 可以完美解决文本框中文 ...

  3. Chrome/谷歌开发者工具分析

    Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...

  4. windows redis 服务安装坑

    环境 winserver 2012 最新版的redis:3.0.503 redis-server.exe   --service-install   redis.windows.conf    --m ...

  5. js正則表達式:验证邮箱格式、password复杂度、手机号码、QQ号码

    $(function () { $("input[name='sub']").on("click", function () { if (!isEmail($( ...

  6. Our happy ending

    题目链接 题意: 输入n.k.L,n个数,最大值不超过L,在序列中取若干个数和能达到k的序列个数 n,k<=20 , 0<=L<=10^9 分析: 题目关键在于和k比較小,所以能够考 ...

  7. 6.非关系型数据库(Nosql)之mongodb:集群(主从复制)

     1.主从复制是MongoDB最经常使用的复制方式.这样的方式很灵活,可用于备份.故障恢复.读扩展等 2最主要的设置方式就是建立一个主节点和一个或多个从节点,每一个从节点要知道主节点的地址. 执行 ...

  8. HDU 1085 Holding Bin-Laden Captive!(母函数,或者找规律)

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  9. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第8章节--配送SP2013Apps 应用程序生命周期

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第8章节--配送SP2013Apps 应用程序生命周期         你在商店拥有一个应用程序后.跟踪不论什么人们碰到的 ...

  10. linux 命令之 watch

    watch能够帮你监測一个命令的执行结果,省得你一遍遍的手动执行.在Linux下.watch是周期性的执行下个程序.并全屏显示执行结果.你能够拿他来监測你想要的一切命令的结果变化,比方 tail 一个 ...