实现思路：

分步骤完成开发，逐渐添加功能：
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. 【转】同形的JavaScript：Web应用的未来

    原文转自:http://blog.jobbole.com/51786/ 在Airbnb,这几年我们已经学习了很多了关于构建富应用的经验,从2011年通过做我们的网站手机版,我们开始研究single-p ...

  2. C# UdpClient 设置超时时间

    /********************************************************************** * C# UdpClient 设置超时时间 * 说明: ...

  3. js取配置文件内容

    使用 jQuery.i18n.properties 实现 Web 前端的国际化 http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18 ...

  4. PAT (Basic Level) Practise：1040. 有几个PAT

    [题目链接] 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6位(T):第二个PAT是第3位(P),第4位(A),第6位(T). 现给定字符串,问一共可 ...

  5. 使用StringBuilder更高效的处理字符串

    前言 本文介绍一个java中处理字符串的技巧 - 使用StringBuilder提高字符串处理效率. StringBuilder 当程序要频繁的进行字符串拼接的时候,直接使用String效率会比较低. ...

  6. 尽可能使用 const

    前言 const 关键字是常量修辞符,如果要告知编译器某个变量在程序中不会发生改变,则可将其声明为 const. 但,对 const 关键字的认识不能仅仅停留在这一层 - 它提供了很多更强大的功能. ...

  7. 使用github + Octopress 搭建免费博客 + 碰到问题的解决方法

    使用github + Octopress 搭建免费博客,先说碰到的问题,具体创建方法见下面. 问题1, 添加ruby淘宝链接问题,显示无法获取, 解决: source “http://ruby.tao ...

  8. 自己写getElementsByClass()方法

    // 根据类名获取元素 function getElementsByClass(oParent,sClass){ var aResult = []; var aNode = oParent.getEl ...

  9. android 软键盘不遮挡页面上的控件

    只需要加android:windowSoftInputMode="adjustPan"就可以如: <activity android:name=".Enhance_ ...

  10. 114. Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...