<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. 关于FileZilla Server的安装问题

    网上很多FileZilla Server教程到最后一步在本机上测试访问成功就没了,实际上还是不完整的,一般情况下外网还是访问不了,外网访问同样很重要. 可能有点童鞋会说安装的时候防火墙提示的时候我也点 ...

  2. 2018 ICPC 沈阳网络赛预赛 Supreme Number(找规律)

    [传送门]https://nanti.jisuanke.com/t/31452 [题目大意]:给定一个数字(最大可达10100),现在要求不超过它的最大超级质数.超级质数定义:对于一个数,把它看成数字 ...

  3. IO重定向

    http://tldp.org/LDP/abs/html/io-redirection.html http://mp.weixin.qq.com/s/JMHDutEG4R0hEaXrYPmCGg 每个 ...

  4. Windows Server 远程桌面报错:No Remote Desktop License Servers Available

    问题描述: 在用远程桌面访问Window Server服务器时,出现如下错误: The remote session was disconnected because there are no Rem ...

  5. Redhat常用指令

    yum 部分常用的命令包括: 自动搜索最快镜像插件:yum install yum-fastestmirror 安装yum图形窗口插件:yum install yumex 查看可能批量安装的列表:yu ...

  6. OnlineJudge测试数据生成模板

    int类型数据生成一(正数最多4位): #include <bits/stdc++.h> using namespace std; int main() { freopen("t ...

  7. 有关不同浏览器不同版本号的css以及js计算高度的问题

    1.input在全部浏览器以及全部的版本号中,都是定义了高度.然后再定义padding或者border值.这时候都会撑开.高度是本身的高度在padding值和border值 2.select在gool ...

  8. [转载]php 数组 类对象 值传递 引用传递 区别

    一般的数据类型(int, float, bool)不做这方面的解说了 这里详细介绍一下数组和的类的对象作为参数进行值传递的区别 数组值传递 实例代码: <?php function main() ...

  9. 跨平台C++:(前言)正确打开C++的方式

    接触C++已经十五年了...但是对于C++而言,我至今是个门外汉,不是谦虚,而是确实不得其门而入. 历程是这样的—— 大学考研要考C++,就自学了.研没考上,C++算是学了,准确的说是C++的语法,以 ...

  10. Android Baseline小tip

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40709353 Baseline Alignment