angularjs填写表单
https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms
<!DOCTYPE html>
<html>
<head> <!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form, pre { margin-bottom:50px; }
</style> <!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head> <!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1"> <h2>Angular Checkboxes and Radio Buttons</h2> <form> <!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div> <!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.colors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.colors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.colors.green"> Green
</label>
</div> <!-- CUSTOM VALUE CHECKBOXES -->
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
Are you awesome?
</label>
</div> <!-- RADIO BUTTONS -->
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
Egg
</label>
</div>
</div> <button type="submit" class="btn btn-danger btn-lg">Send Away!</button> </form> <!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre> <footer class="text-center">
<p>View the <a href="http://scotch.io/tutorials/javascript/handling-checkboxes-and-radio-buttons-in-angular-forms">tutorial</a> by <a href="http://scotch.io">scotch.io</a></p> <h4>Other Angular Form Tutorials</h4>
<p><a href="http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way">Submitting AJAX Forms: The AngularJS Way</a></p>
<p><a href="http://scotch.io/tutorials/javascript/angularjs-form-validation">AngularJS Form Validation</a></p>
</footer> </div>
</body>
</html>
angularjs填写表单的更多相关文章
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位
$(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...
- javascript自动填写表单小技巧
javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 夺命雷公狗—angularjs—3—表单验证的高级用法
其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
随机推荐
- 【HDOJ】4057 Rescue the Rabbit
挺有意思的一道题目,解法是AC自动机+DP.AC自动机建立fail指针时,一定要注意结点的属性也需要传递.AC自动机结合了trie和kmp的优点.需要注意的是,每个模式串仅计算一次,否则这题很难解. ...
- 【原创翻译】The Case for the Reduced Instruction Set Computer
RISC机的例子 David A. Patterson 加州大学伯克利分校计算机科学系 David R. Ditzel 贝尔实验室计算科学研究中心 介绍 计算机体系结构最主要的目标之一就是设计比之前产 ...
- Oracle系列之游标
涉及到表的处理请参看原表结构与数据 Oracle建表插数据等等 游标: 1.目的 解决“ select * ”返回空.多行记录问题 但凡select,就可能多行结果集,也就需要用游标 2.原理 多行 ...
- poj2761Feed the dogs(划分树-区间K值)
链接 这树着实不好理解啊 讲解http://www.cnblogs.com/pony1993/archive/2012/07/17/2594544.html 对于找K值 右区间的确定不是太理解..先当 ...
- HelloXV1.77网络功能简介
HelloXV1.77的网络功能做了较大程度的加强,移植了业界广泛使用的lwIP协议栈,并做了很多优化工作,修正了其中的一些bug.同时,实现了一个network字符界面应用程序,可以对网络功能进行调 ...
- CSS+DIV之强化background属性
1.背景颜色属性(background-color),设定背景颜色=html中bgcolor属性.我来写一个红色背景的body,(也可以定义某个特定区域) 示例写法:body {} 2.背景图片属性( ...
- HDU-4515 小Q系列故事——世界上最遥远的距离
小Q系列故事——世界上最遥远的距离 Time Limit: 500/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) ...
- [codevs2152]滑雪
题目来源 http://www.tyvj.cn/p/1004 http://www.luogu.org/problem/show?pid=1434# http://codevs.cn/problem/ ...
- 【JS】Intermediate7:jQuery:DOM API
1.jQuery also makes performing actions on many elements at the same time simple 2.eg:$('.note').css( ...
- SSE 标准化向量
mov esi, this ; vector u movups xmm0, [esi] ; first vector in xmm0 movaps xmm2, xmm0 ; copy original ...