本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识，希望对大家使用和学习AngularJs有所帮助。

1.简单的表单提交；

2.更多的表单元素；

3.初始化表单；

代码

<!doctype html>

<html ng-app="lesson" ng-controller="FormCtrl" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>

LESSON 7

</title>

<link rel="stylesheet" type="text/css" href="css/main.css" />

<style>

#content1{padding:16px;}

</style>

</head>

<body>

<form ng-submit="PostForm()" >

<ul>

<li>

<label>用户名：</label><input type="text" ng-model="form.UserName" />

</li>

<li>

<label>昵称：</label><input type="text" ng-model="form.NickName" />

</li>

<li>

<label>年龄：</label><input type="text" ng-model="form.Age" />

</li>

<li>

<label>是否已婚：</label><input  type="checkbox" ng-model="form.IsMarried" />

</li>

<li>

<label>喜爱的动物：</label>

<input  type="radio" ng-model="form.LovedAnimal" value="狗" />狗

<input  type="radio" ng-model="form.LovedAnimal" value="猫" />猫

</li>

<li>

<label>居住的城市：</label>

<select ng-model="form.LocationCity"

ng-options=" obj.text as obj.value for obj in form.LocationCityList"

>

<option value="">请选择城市</option>

</select>

</li>

<li>

<input type="submit" value="提交" />

</li>

</ul>

</form>

<ul>

<li>{{form.UserName}}</li>

<li>{{form.NickName}}</li>

<li>{{form.Age}}</li>

<li>{{form.IsMarried}}</li>

<li>{{form.LovedAnimal}}</li>

<li>{{form.LocationCity}}</li>

</ul>

<script src="scripts/angular-1.4.6.min.js"></script>

<script>

var app = angular.module("lesson",[]);

app.controller("FormCtrl",function($scope){

$scope.formInitObj = {

UserName:"",

NickName:"",

};

$scope.form = {};

$scope.form.LocationCityList = [

{text:"北京",value:"北京"},

{text:"上海",value:"上海"},

{text:"广州",value:"广州"}

];

$scope.PostForm=function(){

console.log($scope.form);

$scope.form = angular.copy($scope.formInitObj);

}

});

</script>

</body>

</html>

执行结果

原文链接：http://www.maiziedu.com/wiki/angularjs/develop/

AngularJs入门之表单开发的更多相关文章

  1. AngularJS入门基础——表单验证

    <form name="form" novalidata>   <label name="email">your email</l ...

  2. Gemini.Workflow 双子工作流入门教程五：业务表单开发

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:业务表单开发. 业务表单开发 业务表单的开发,和在 ...

  3. 【从零开始学BPM，Day3】自定义表单开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  4. 【从零开始学BPM，Day2】默认表单开发

    [课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...

  5. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  6. Winform开发框架中工作流模块的业务表单开发

    在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...

  7. jeecg入门操作—表单界面

    一.搭建jeecg开发环境 参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...

  8. Java工作流引擎结合可视化表单开发，10分钟完成一个业务流程发布

    回忆以前工作流引擎的应用,感觉历历在目啊!当初公司接了一个项目关于政府单位公文流转的管理系统,一开始客户跟我画了十多张业务流程图.话说这十多张业务流程图,涉及的业务范围还蛮多,像用审批授权,开通流程, ...

  9. jeecg入门操作—树型表单开发

    树表类型表单 表单创建,基础配置如下: 1.设置表单类型为:单表; 2.是否树选择:是; 3.设置特殊字段:[树形表单父id][树开表单列] 结果测试

随机推荐

  1. 从零点壹开始学JAVA（DAY 1 笔记）<补充记录>

    一个同事的先生(下面称呼其为耿大神)是做开发的,比较资深的那种,在他们公司的核心技术部门. 幸运的是,耿大神很乐意帮助我这株小白菜,在业余时间指导我,这里深表感谢. 耿大神隔段时间会给我提一些问题,让 ...

  2. 【面试】HTTP post请求与get请求的区别

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  3. 常用.NET库使用总结

    Json.NET 获取类实例对应的jtoken:JObject.FromObject() 获取数组实例对应的jtoken:JArray.FromObject() Json.NET将枚举转换为int R ...

  4. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  5. 2_MVC+EF+Autofac(dbfirst)轻型项目框架_用户权限验证

    前言 接上面两篇 0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架 与 1_MVC+EF+Autofac(dbfirst)轻型项目框架_core层(以登陆为例) .在第一篇中介 ...

  6. linux shell basic command

    Learning basic Linux commands Command Description $ ls This command is used to check the contents of ...

  7. BZOJ 2048 题解

    2048: [2009国家集训队]书堆 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1076  Solved: 499[Submit][Status ...

  8. bzoj2743离线+树状数组

    奇葩染色,对于每一个点关心的是前前个同颜色的位置,但是处理方法相同 离线比较神奇,按照右端点排序,然后每次用的是左端点,就不用建可持久化树状数组(什么鬼)了 区间修改+单点查询 果断差分以后用树状数组 ...

  9. 【生活没有希望】NOIP2010初赛 烽火传递 smartoj1475

    整天初赛题做做,生活没有希望 用单调队列优化的dp 因为满足后来的总比先来的(在某些方面)更优 所以能用单调队列 n2变成n #include <cstdio> ],b[],c[]; in ...

  10. Rust语言的多线程编程

    我写这篇短文的时候,正值Rust1.0发布不久,严格来说这是一门兼具C语言的执行效率和Java的开发效率的强大语言,它的所有权机制竟然让你无法写出线程不安全的代码,它是一门可以用来写操作系统的系统级语 ...