<!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. 优化临时表使用,SQL语句性能提升100倍

    [问题现象] 线上mysql数据库爆出一个慢查询,DBA观察发现,查询时服务器IO飙升,IO占用率达到100%, 执行时间长达7s左右.SQL语句如下:SELECT DISTINCT g.*, cp. ...

  2. linux shell取文本最后一行

    目前我知道的方法有四种 1.awk 'END {print}'   2.sed -n '$p'   3.sed '$!N;$!D'   4.awk '{b=a"\n"$0;a=$0 ...

  3. 【java开发】数据类型

    ok,为期两天的ubuntu常用命令学习结束,现在开始java语言的学习. 上篇结尾说了ubuntu下的jdk文件安装,现在顺便说一下win下的jdk环境变量配置 在官网下载符合系统的jdk文件,可以 ...

  4. web也是区分前端与后端的,session\cookie辨析

    <1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...

  5. [转]html超链接打开的窗口大小

    <a href="#" onclick="javascript:window.open('http://www.baidu.com','','height=20,w ...

  6. NopCommerce 增加 Customer Settings

    预期: 仿照Customer 的 Phone number enabled 和 required 增加MemberType 相关步骤如下: 1.运行站点 Admin -> Settings -& ...

  7. Oracle闪回技术详解

     概述: 闪回技术是Oracle强大数据库备份恢复机制的一部分,在数据库发生逻辑错误的时候,闪回技术能提供快速且最小损失的恢复(多数闪回功能都能在数据库联机状态下完成).需要注意的是,闪回技术旨在快速 ...

  8. 运用PCA进行降维的好处

    运用PCA对高维数据进行降维,有一下几个特点: (1)数据从高维空间降到低维,因为求方差的缘故,相似的特征会被合并掉,因此数据会缩减,特征的个数会减小,这有利于防止过拟合现象的出现.但PCA并不是一种 ...

  9. 用U盘安装Ubuntu系统

    用U盘安装Ubuntu,需制作一个Ubuntu的U盘安装盘,最为方便和可靠的制作方法是在Linux系统下使用dd命令,具体如下, sudo dd if=ubuntu-14.04.4-server-am ...

  10. Python-09-线程、进程、协程、异步IO

    0. 什么是线程(thread)? 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆 ...