1. <div class="row ng-scope">
  2. <div class="col-lg-12">
  3. <h1 class="page-header">详细信息</h1>
  4. </div>
  5. <!-- /.col-lg-12 -->
  6. </div>
  7. <div class="panel panel-default">
  8. <div class='panel-heading'>
  9. <div class="btn-group pull-right">
  10. <a ng-click="selectType=1" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></a>
  11. <a ng-click="selectType=0" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span></a>
  12. </div>个人资料
  13. </div>
  14. <div class="panel-body">
  15. <div class="row">
  16. <div class="col-lg-6 panel-body">
  17. <div class="form-group">
  18. <div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType" ng-class="{'todo-complete': item.complete}">
  19. <p>{{user.model.username}}</p>
  20. </div>
  21.  
  22. <div class='todo-item' ng-show="selectType">
  23. <input type="text" class="form-control" ng-model="user.model.username" ng-class="{'todo-complete': item.complete}"/>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="row">
  29. <div class="col-lg-6 panel-body">
  30. <div class="form-group">
  31. <div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType">
  32. <p>{{user.model.email}}</p>
  33. </div>
  34.  
  35. <div class='todo-item' ng-show="selectType">
  36. <input type="email" class="form-control" ng-model="user.model.email" required/>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="row">
  42. <div class="col-lg-6 panel-body">
  43. <div style='position: relative;margin: 7px 13px;' class='todo-item' ng-hide="selectType">
  44. <p>******</p>
  45. </div>
  46.  
  47. <div class='todo-item' ng-show="selectType">
  48. <input type="password" ng-model="user.model.password" placeholder='Reset User password' required/>
  49. </div>
  50. </div>
  51. </div>
  52. </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. [Inside HotSpot] Serial垃圾回收器 (二) Minor GC

    Serial垃圾回收器Minor GC 1. DefNewGeneration垃圾回收 新生代使用复制算法做垃圾回收,比老年代的标记-压缩简单很多,所有回收代码都位于DefNewGeneration: ...

  2. 2017-10-28-morning-清北模拟赛

    T1 立方数(cubic) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK定义了一个数叫“立方数”,若一个数可以被写作是一个正整数的3次方,则这个数就是 ...

  3. python多线程实践小结

    参考:http://www.cnblogs.com/tqsummer/archive/2011/01/25/1944771.html #!/usr/bin/env python import sys ...

  4. java消息队列怎么用

    消息队列的使用场景是怎样的? 经常听到诸如rebbitmq,activemq,请教一下各位前辈消息队列的使用场景是怎样的,什么时候会用到它   校验用户名等信息,如果没问题会在数据库中添加一个用户记录 ...

  5. android中MVC,MVP和MVVM三种模式详解析

    我们都知道,Android本身就采用了MVC模式,model层数据源层我们就不说了,至于view层即通过xml来体现,而 controller层的角色一般是由activity来担当的.虽然我们项目用到 ...

  6. 使用 Unicode 编码

    面向公共语言执行库的应用程序使用编码将字符表示形式从本机字符方案(Unicode)映射为其它方案. 应用程序使用解码将字符从非本机方案(非 Unicode)映射为本机方案. System.Text 命 ...

  7. Android的activity的生命周期

    activity的生命周期有四个重要的状态:活动,暂停,停止,销毁 基本的方法有:onCreate.onStart.onResume.onPause.onStop.onDestory 最经常使用的方法 ...

  8. SolidEdge 如何由装配图快速进行标注和零件序号编写 制作BOM表

    点击"零件明细表",然后点击要生成序号的视图,然后点击前面两项(自动标号和放置清单),点击完成后效果如下图所示.   在点击完成之前,先点击他前面的一个按钮,取消勾选"项 ...

  9. NHibernate之旅(7):初探NHibernate中的并发控制

    本节内容 什么是并发控制? 悲观并发控制(Pessimistic Concurrency) 乐观并发控制(Optimistic Concurrency) NHibernate支持乐观并发控制 实例分析 ...

  10. android_checkbox_dialog 设计 是不是要开起 默认不提示对话框

    android_checkbox_dialog设计是不是开起默认不提示 package com.example.android_checkbox_dialog; import android.app. ...