<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

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

</head>

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

<div class="container">

<h3>Users</h3>

<table class="table table-striped">

  <thead>

    <tr>

      <th>编辑</th>

      <th>名</th>

      <th>姓</th>

    </tr>

  </thead>

  <tbody>

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

      <td>

        <button class="btn" ng-click="editUser(user.id)" >

          <span class="glyphicon glyphicon-pencil"></span>编辑

        </button>

      </td>

      <td>{{ user.fName }}</td>

      <td>{{ user.lName }}</td>

    </tr>

  </tbody>

</table>

<hr>

<button class="btn btn-success" ng-click="editUser('new')">

<span class="glyphicon glyphicon-user"></span>创建新用户

</button>

<hr>

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

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

<form class="form-horizontal">

  <div class="form-group">

    <label class="col-sm-2 control-label">名:</label>

    <div class="col-sm-10">

    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">

    </div>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">姓:</label>

    <div class="col-sm-10">

    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">

    </div>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">密码:</label>

    <div class="col-sm-10">

    <input type="password" ng-model="passw1" placeholder="密码">

    </div>

  </div>

  <div class="form-group">

    <label class="col-sm-2 control-label">重复密码:</label>

    <div class="col-sm-10">

    <input type="password" ng-model="passw2" placeholder="重复密码">

    </div>

  </div>

</form>

<hr>

<button class="btn btn-success" ng-disabled="error || incomplete">

<span class="glyphicon glyphicon-save"></span>修改

</button>

</div>

<script src="test.js"></script>

</body>

</html>
var app=angular.module('myApp',[]);

app.controller('userCtrl',function($scope){

       $scope.fName='';

       $scope.lName='';

       $scope.passw1='';

       $scope.passw2='';

       $scope.users=[

          {id:1,fName:'Hege',lName:'Pege'},

          {id:2,fName:'Kim',lName:'Pim'},

          {id:3,fName:'Sal',lName:'Smith'},

          {id:4,fName:'Jack',lName:'Jones'},

          {id:5,fName:'John',lName:'Doe'},

          {id:6,fName:'Peter',lName:'Pan'},

       ];

       $scope.edit=true;

       $scope.error=false;

       $scope.incomplete=false;

       $scope.editUser=function(id){

             if(id=='new'){

                $scope.edit=true;

                $scope.incomplete=true;

                $scope.fName='';

                $scope.lName='';

             }else{

                 $scope.edit=false;

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

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

             }

       };

       $scope.$watch('passw1',function(){

             $scope.test();

       });

         $scope.$watch('passw2',function(){

             $scope.test();

       });

        $scope.$watch('fName',function(){

             $scope.test();

       });

        $scope.$watch('lName',function(){

             $scope.test();

       });

      $scope.test=function(){

           if($scope.passw1!==$scope.passw2){

                $scope.error=true;

           }else{

                 $scope.error=false;

           }

           $scope.incomplete=false;

           if($scope.edit&&(!$scope.fName.length)||!$scope.lName.length||

               !$scope.lName.length||!$scope.passw1.length||!$scope.passw2.length

               ){

               $scope.incomplete=true;

           }

      }

});

Angular.js通过bootstrap实现经典的表单提交的更多相关文章

  1. 使用RequireJs和Bootstrap模态框实现表单提交

    下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

  2. js判断checkbox状态，处理表单提交事件

    功能描述:手机网页需要一个投票功能,通过form的post提交.有5-20个checkbox选项,至少选一项,至多选三项.需要在用户点击提交按钮前,判断checkbox的状态是否符合条件,符合则提交到 ...

  3. form表单提交过程

    本文为转载文章! 今天,我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式,因此,本文不演示WebForms服务器控件的相关内容. 简单的表单,简单的处理方式 好了,让我们进入今天的 ...

  4. koa 基础（十一）koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  5. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  6. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  7. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  8. Angular Reactive Forms -- Model-Driven Forms响应式表单

    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )  官方文档:https://v2.angul ...

  9. Bootstrap历练实例：表单帮助文件

    Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html>& ...

随机推荐

  1. 使用管道符在PowerShell中进行各种数据操作

    最近在培训PowerShell,在讲到Pipeline的时候,对于我这种长期和数据(数据库)打交道的人来说,觉得很实用,所以写此博文,记录一下. 无论是在Linux中写Bash脚本还是在Window上 ...

  2. .NET架构设计、框架设计系列文章总结

    从事.NET开发到现在已经有七个年头了.慢慢的可能会很少写.NET文章了.不知不觉竟然走了这么多年,热爱.NET热爱c#.突然想对这一路的经历进行一个总结. 是时候开始下一阶段的旅途,希望这些文章可以 ...

  3. IntelliJ IDEA 配置运行程序

    IntelliJ IDEA 对于Javaer开发来说还是很nice的,就是第一次用可能配置项有点生疏,这里就记录一下IntelliJ IDEA 配置运行程序. 1. 点击Edit Config... ...

  4. Webservice详解

    WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨平台的规范(抽象) 3. 多个跨平台.跨语言的应用间通信整合的方案(实际) ...

  5. Linux From Scratch（从零开始构建Linux系统，简称LFS）- Version 7.7（三）

    八. 构建LFS系统 1. 准备虚拟内核文件系统 内核会挂载几个文件系统用于自己和用户空间程序交换信息.这些文件系统是虚拟的,并不占用实际磁盘空间, 它们的内容会放在内存里. mkdir -pv $L ...

  6. Mysql主从复制，读写分离(mysql-proxy)，双主结构完整构建过程

    下面介绍MySQL主从复制,读写分离,双主结构完整构建过程,不涉及过多理论,只有实验和配置的过程. Mysql主从复制(转载请注明出处,博文地址:) 原理是master将改变记录到二进制日志(bina ...

  7. Android 实现网络多线程APK文件下载

    (转自:http://blog.csdn.net/mad1989/article/details/38421465) 实现原理 (1)首先获得下载文件的长度,然后设置本地文件的长度. (2)根据文件长 ...

  8. 用keytool工具生成签名文件与获取摘要信息

    在Command命命令行模式下: 转到工作目录 执行下面命令: keytool -genkey -v -keystore debug.keystore 最后是生成的文件名,执行该命令后有很多内容要填写 ...

  9. Visual Studio SetSite failed for package [JavaScriptWebExtensionsPackage] 错误解决方案一则

    安装 AspNet5.ENU.RC1.exe Microsoft ASP.NET and Web Tools 2015 (RC) – Visual Studio 2015 打开VS后发生了错误 < ...

  10. Hibernate内测总结

    1．在Hibernate中,以下关于主键生成器说法错误的是( ). A．increment可以用于类型为long.short或byte的主键 B．identity用于如SQL Server.DB2.M ...