实现思路：

分步骤完成开发，逐渐添加功能：
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. JQuery基础DOM操作

    DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...

  2. 锋利的jQuery之事件

    jQuery中的事件和动画 JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如:当浏览器 ...

  3. fibonacci数列(二)_矩阵快速幂

    描述 In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. For exampl ...

  4. centOS7 修改hostname

    hostnamectl set-hostname 你要修改到的hostname   localectl set-locale LANG=要修改的语言     介绍个Centos 7很不错的教程网站:h ...

  5. 【题解】【数组】【Leetcode】Merge Sorted Array

    Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assume th ...

  6. mySQL CRUD操作（数据库的增删改查）

    一.数据库操作 1.创建数据库 create database 数据库名称 2.删除数据库 drop database 数据库名称   二.表操作 1．创建表 create table 表名 (    ...

  7. 三步搞定ISO/GHO安装系统 - imsoft.cnblogs

    高清互动安装系统附件:重装系统视频教程.7z

  8. Apache Flex + Adobe Flash Builder环境配置

    在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...

  9. Testing Round #8 A. IQ Test 水题

    题目链接:http://codeforces.com/problemset/problem/328/A 这道题目wa了一次,注意这句话: You should also print 42 if the ...

  10. [luogu P2170] 选学霸（并查集+dp）

    题目传送门:https://www.luogu.org/problem/show?pid=2170 题目描述 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一 ...