实现思路：

分步骤完成开发，逐渐添加功能：
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. Autoresizing和AutoLayout

    1 使用Autoresizing的方式进行界面布局 1.1 问题 Autoresizing是IOS旧版的自动布局技术,现在仍然被很多企业使用.本案例将学习如何使用Autoresizing完成界面的布局 ...

  2. MapReduce 计算模型

    前言 本文讲解Hadoop中的编程及计算模型MapReduce,并将给出在MapReduce模型下编程的基本套路. 模型架构 在Hadoop中,用于执行计算任务(MapReduce任务)的机器有两个角 ...

  3. （实用篇）php处理单文件、多文件上传代码分享

    php处理  单文件.多文件上传实例代码,供大家参考,具体内容如下 后台处理文件submit_form_process.php <?php /************************** ...

  4. Sed Regular Expression

    Today I also used Sed to do some relatively complex job. So I used regular expression. However, the ...

  5. Windows IP安全策略。

    一直在遗憾Windows下没有一个如Linux小Iptables一样的工具,能够严格的管控机器的访问限制. 后面突然看到一个叫Ipsec在Windows感觉还不错.以命令行的方式进行定义的话在多台服务 ...

  6. flexbox的术语

    在详细阅读这篇文章之前,我们很有必要先了解flexbox的几个常用术语,这样有助于大家对后文的理解. 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素 ...

  7. tyvj 1056 能量项链 区间dp (很神)

    P1056 能量项链 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第一道 描述     在Mars星球上,每个Mars人都随身佩 ...

  8. Socket实现异步通信

    private static void RecVing(IAsyncResult Result) {     //通过 result 获取socket.在这个socket上你启动了BeginAccep ...

  9. apache开启url rewrite模块

    在把服务器数据转移到本地服务器之后,本地打开首页出现排版紊乱等问题,经过大神指点说是url rewrite的问题. 本篇文章主要写怎样开启apache的url rewrite功能. 打开Apache2 ...

  10. Oracle学习系列2

    SQL语法练习: 1,选择部门30中的所有员工 select * from emp where deptno=30; 2,列出办事员的姓名,编号和部门编号 select ename, empno, d ...