实现思路：

分步骤完成开发，逐渐添加功能：
1.实现输出users对象。
2.实现点击“编辑”按钮，在表单中显示firstname和lastname，并不可修改。
3.实现“新建用户”和“编辑用户”的切换。
4.实现“创建新用户”按钮。
5.实现“验证”部分。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

 </head>

 <body ng-app="myApp" ng-controller="userCtl">

 <table>

 <tr>

 <TD></TD><td>名</td><td>姓</td>

 </tr>

 <tr ng-repeat="user in users">

 <TD><button type="button" ng-click="editUser(user.id)">编辑</button></TD><td>{{user.firstname}}</td><td>{{user.lastname}}</td>

 </tr>

 </table>

 <input type="button" value="创建新用户" ng-click="editUser('new')">

 <h3 ng-show="edit">新建用户</h3>

 <h3 ng-hide="edit">编辑用户</h3>

 <form>

 firstname:<input type="text" name="firstnam" ng-model="firstname" ng-disabled="!edit"><br>

 lastname :<input type="text" name="lastname" ng-model="lastname" ng-disabled="!edit"><br>

 密      码：<input type="password" name="passwd1" ng-model="passwd1"><br>

 重 复 密 码：<input type="password" name="passwd2" ng-model="passwd2" ><br>

 <button ng-disabled="error || incomplete">提交</button>

 </form>

 <script>

 var app=angular.module("myApp",[]);

 app.controller("userCtl",function($scope){

     $scope.firstname='';

     $scope.lastname='';

     $scope.edit=true;

     $scope.users=[{id:1,firstname:'john',lastname:'cena'},{id:2,firstname:'jeff',lastname:'chen'},{id:3,firstname:'bill',lastname:'gates'},];

     $scope.editUser = function(id){

         if(id == 'new'){

             $scope.edit=true;

             $scope.firstname='';

             $scope.lastname='';

         } else {

             $scope.edit = false;

             $scope.firstname=$scope.users[id-1].firstname;

             $scope.lastname=$scope.users[id-1].lastname;

             $scope.passwd1='';

             $scope.passwd2='';

         }

     };

     $scope.error = false;

     $scope.incomplete = false;

     $scope.$watch("firstname",function(){ $scope.test(); });

     $scope.$watch("lastname",function(){ $scope.test(); });

     $scope.$watch("passwd1",function(){ $scope.test(); });

     $scope.$watch("passwd2",function(){　$scope.test(); });

     $scope.test = function(){

         if($scope.passwd1 !== $scope.passwd2) {

             $scope.error = true;

         }

         else {

             $scope.error = false;

         }

         $scope.incomplete = false;

         //新建用户状态，而且四个属性只要有一个没有值，就是未完成状态

         if( $scope.edit &&　( !$scope.firstname.length || !$scope.lastname.length || !$scope.passwd1.length || !$scope.passwd2.length )) {

             $scope.incomplete = true;

         }

     };

 });

 </script>

 </body>

 </html>

用户编辑新建_AngularJS实现的更多相关文章

  1. react 项目实战（七）用户编辑与删除

    添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...

  2. 加链接太麻烦？使用 linkit 模块提升用户编辑体验

    在制作网站内容时,适当地添加链接会非常用利于网站内容的SEO.加入链接的文章可以让访客了解到更多相关内容,从而提升文章的质量.被链接到的内容也能因此获得更多的访问和关注.只不过,在内容编辑时添加链接却 ...

  3. Confluence 6 允许其他用户编辑站点欢迎消息

    你可以通过使用 Include Page 宏从你站点其他页面中包含内容,而允许其他不是 Confluence 管理员的用户编辑站点欢迎消息.使用这种方式能够避免直接对模板文件中的内容进行编辑. 从站点 ...

  4. 数据库实例: STOREBOOK > 用户 > 编辑 用户: SYSTEM

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: SYSTEM 编辑 用户: SYSTEM 1. 一般信息返回顶部 1.1, 1.2, 2 ...

  5. 数据库实例: STOREBOOK > 用户 > 编辑 用户: SYSMAN

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: SYSMAN 编辑 用户: SYSMAN 1. 一般信息返回顶部 1.1,   1.2, ...

  6. 数据库实例: STOREBOOK > 用户 > 编辑 用户: SYS

    ylbtech-Oracle:数据库实例: 数据库实例: STOREBOOK  >  用户  >  编辑 用户: SYS 编辑 用户: SYS 1. 一般信息返回顶部 1.1, 1.2, ...

  7. 数据库实例: STOREBOOK > 用户 > 编辑 用户: PUBLIC

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: PUBLIC 编辑 用户: PUBLIC 1. 一般信息返回顶部 1.1, 1.2, 2 ...

  8. 数据库实例: STOREBOOK > 用户 > 编辑 用户: MGMT_VIEW

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: MGMT_VIEW 编辑 用户: MGMT_VIEW 1. 一般信息返回顶部 1.1, ...

  9. 数据库实例: STOREBOOK > 用户 > 编辑 用户: DBSNMP

    ylbtech-Oracle:数据库实例: STOREBOOK  >  用户  >  编辑 用户: DBSNMP 编辑 用户: DBSNMP 1. 一般信息返回顶部 1.1, 1.2, 2 ...

随机推荐

  1. JS对于Android和IOS平台的点击响应的适配

    IOS点击事件 Click 300毫秒点击延迟 解决办法: 参考:http://cuiqingcai.com/1687.html 可判断设备 if (/(iPhone|iPad|iPod|iOS)/i ...

  2. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  3. Inno Setup 安装前卸载原程序

    Inno Setup 安装前卸载原程序 分类: Install Setup 2013-02-02 15:53 2315人阅读 评论(0) 收藏 举报 很多時候我們需要在安裝文件之前卸載原有的程序而不是 ...

  4. magnetom模板制作

    我个人认为Magento模板制作的难点在于不了解Magento的架构,不会调动block.Magento的block调动几乎都是靠xml.在下面的内容会提及如何操作. 制作Magento模板的前提是: ...

  5. Eclipse 安装 CDT

    最近准备开始重新学C++,先从IDE开始准备起 Ubuntu下安装非常简单: 打开Eclipse: help -> Install new software ->  http://down ...

  6. int integer string间的转换

    1.int-->Integer new Integer(i); 2.Integer-->int Integer i = new Integer(1); int k = i.intValue ...

  7. 关于FireFox类VIM插件。VimPerator

    说实话现在一直非常喜欢VIM的那种操控方式.当然我不是一个程序员,只是觉得处理文本的时候,那种效率很快.而且不用来回再鼠标跟键盘之间的切换也让我感觉很舒服. 以前一直在想如果开网页的时候也能那样得话不 ...

  8. Ubuntu 13.10下Hadoop 2.2 安装、配置、编译（伪分布式）

    1.安装JDK.在此不做解说,上篇博文里已介绍过.http://www.cnblogs.com/lifeinsmile/p/3578677.html 2.配置ssh. ssh服务,用于管理远程Hado ...

  9. JAVA基础总结一：

    一.数据类型及变量名和注释 1. Java 中的数据类型分为两大类: 1) 原生数据类型 (Primitive Data Type) :8个(byte.char.short.int.long.floa ...

  10. C语言学习笔记 -冒泡排序

    //冒泡排序 void main(){ , , , , }; ]); ; i<max - ; i++) { for (int j = i; j<max; j++) { if (a[i]&g ...