AngularJs入门之表单开发
本文和大家分享的主要是前端开发中必备的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入门之表单开发的更多相关文章
- AngularJS入门基础——表单验证
<form name="form" novalidata> <label name="email">your email</l ...
- Gemini.Workflow 双子工作流入门教程五：业务表单开发
简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:业务表单开发. 业务表单开发 业务表单的开发,和在 ...
- 【从零开始学BPM，Day3】自定义表单开发
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BP ...
- 【从零开始学BPM，Day2】默认表单开发
[课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- Winform开发框架中工作流模块的业务表单开发
在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...
- jeecg入门操作—表单界面
一.搭建jeecg开发环境 参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...
- Java工作流引擎结合可视化表单开发，10分钟完成一个业务流程发布
回忆以前工作流引擎的应用,感觉历历在目啊!当初公司接了一个项目关于政府单位公文流转的管理系统,一开始客户跟我画了十多张业务流程图.话说这十多张业务流程图,涉及的业务范围还蛮多,像用审批授权,开通流程, ...
- jeecg入门操作—树型表单开发
树表类型表单 表单创建,基础配置如下: 1.设置表单类型为:单表; 2.是否树选择:是; 3.设置特殊字段:[树形表单父id][树开表单列] 结果测试
随机推荐
- 分享一个discuz touch端的jQuery下拉刷新组件
在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...
- 伪类before和after
以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西! 如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)
- 【填坑】bzoj3224 splay裸题
人生第一道splay不出所料是一道裸题,一道水题,一道2k代码都不到的题 #include <cstdio> ,n,p,q; ],c[][],size[],sp[]; void rot(i ...
- （RMQ版）LCA注意要点
inline int lca(int x,int y){ if(x>y) swap(x,y); ]][x]]<h[rmq[log[y-x+]][y-near[y-x+]+]])? rmq[ ...
- 【ORACLE】IN 后跟&参数字符串的处理方法
今天写尼日利亚BOSS,数据修复脚本时遇到一个问题, 参数字符串无法再IN中使用,例如:想要完成下面的查询 select * From customeren c where c.customercod ...
- mvc 返回值
mvc返回值为Model类型 public ActionResult Index(T result) { return View(result); } view中的对象即为页面中的Model数据,之后 ...
- jmobile学习之路 ---- 视口
当我们的浏览器在窗口最大化的时候,此时屏幕的宽度,就是我们桌面的分辨率.这个规则仅仅适用于PC! 我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980!居然和PC屏幕差不多大! 苹果主导的这 ...
- js二进制与十进制互转
十进制转换为二进制: var num = 100; console.log(num.toString(2)); toString()方法可把一个 Number 对象转换为一个字符串,并返回结果. 语法 ...
- 续关于C#的微信开发的入门记录一
前几天写了一篇博客<关于C#的微信开发的入门记录一>,原文地址:http://www.cnblogs.com/zhankui/p/4515905.html,现在继续完善: 目前很多小伙伴都 ...
- XNA游戏编程等
XNA游戏编程:http://shiba.hpe.sh.cn/jiaoyanzu/WULI/soft/xna.aspx?classId=4 表示没学过XNA,但感觉还是很不错的,给学XNA的童鞋们参考 ...