实现思路：

分步骤完成开发，逐渐添加功能：
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. Net use命令

    以指定账户密码建立网络磁盘 net use s: \\ip\ipc$  "密码" /user:“用户名”

  2. 最熟悉的陌生人：ListView 中的观察者模式

    RecyclerView 得宠之前,ListView 可以说是我们用的最多的组件.之前一直没有好好看看它的源码,知其然不知其所以然. 今天我们来窥一窥 ListView 中的观察者模式. 不熟悉观察者 ...

  3. Unity3D ShaderLab 使用贴图对模型的高光进行遮罩

    Unity3D ShaderLab 使用贴图对模型的高光进行遮罩 前面研究了高光效果的实现,再说说现很多游戏用到的高光贴图技术,因为它可以让3D美工更容易控制最终的视觉效果. 这也就为我们提供了另外的 ...

  4. 根据终端分配不同的url地址

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  5. ASP.NET中的指令:

    来源:http://www.cnblogs.com/zhuisha/archive/2008/07/02/1234222.html ASP.NET中的指令: @Page指令: @Page指令只能在.a ...

  6. DATEADD(Day, DATEDIFF(Day,0,ShippingTime), 0)

    select DATEADD(Day, DATEDIFF(Day,0,GETDATE()), 0),DATEDIFF(Day,0,GETDATE()),GETDATE() 结果: (无列名) (无列名 ...

  7. Linux Shell 命令

    (1) 操作一个文件并对文件查询行进行切分处理 (或者1-) (2) 操作文件进行去重并显示重复次数 | sort | uniq -c (3) 查看总的汇总行数 | sort | uniq -c | ...

  8. JavaScript中递归函数用法需要注意的

    <script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1);//return num ...

  9. 读metronic文档学到的几个知识点

    1.RTL  同样的页面,它做了两套.为什么,因为在这个世界上,有些民族,有些语种,是从右向左来的. 2. google material design 同样的一套东西,又分别做了google mat ...

  10. c#部分---结构体再利用；

    //定义一个结构体,存放关于车辆的几个信息 //将所有车的信息都放入集合中 //车型号 价格(W) 轴距 (mm) 油耗(L/100km) //宝马320Li 38 2920 6.9 //宝马520L ...