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填写表单的更多相关文章

  1. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  2. 解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  3. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  4. AngularJS实现表单手动验证和表单自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...

  5. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  6. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  7. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  8. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  9. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

随机推荐

  1. 【HDOJ】1462 Word Crosses

    字符串水题,这么做可能比较巧妙. /* 1462 */ #include <iostream> #include <string> #include <map> # ...

  2. GL_INTERFACE

    prompt ****************************************************************************** 总账接口主要完成其他模块的总 ...

  3. Java金字塔及变形

    Java金字塔 package com.tfj.test; public class JinZiTa { public static void main(String[] args){ int num ...

  4. hadoop2.2编程：MRUnit

    examples: Overview This document explains how to write unit tests for your map reduce code, and test ...

  5. Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-154 发布时间: 2013-11-13 更新时间: 201 ...

  6. Visual Studio的.NET内存分配分析器解析

    Visual Studio 2012拥有丰富的有价值的功能,以至于我听到开发者反馈的需要的新功能新版本已经有了.另外,我听到开发人员询问具体的功能的某个特性,实际上他真正需要的是另外一个功能点. 上面 ...

  7. hdu5593--ZYB's Tree（树形dp）

    问题描述 ZYB有一颗N个节点的树,现在他希望你对于每一个点,求出离每个点距离不超过KK的点的个数. 两个点(x,y)在树上的距离定义为两个点树上最短路径经过的边数, 为了节约读入和输出的时间,我们采 ...

  8. PHP数组操作汇总

    php 操作数组 (合并,拆分,追加,查找,删除等) - Just Code - ITeye技术网站 PHP操作数组的一些函数介绍 -- 简明现代魔法 PHP数组元素操作实例 -- 简明现代魔法 儿童 ...

  9. windows进程间通信 .

    摘 要: 随着人们对应用程序的要求越来越高,单进程应用在许多场合已不能满足人们的要求.编写多进程/多线程程序成为现代程序设计的一个重要特点,在多进程程序设计中,进程间的通信是不可避免的.Microso ...

  10. var_dump() 打印数组不完整 解决办法

    我们用var_dump() 打印数组, 一般会出现这种情况, 就是打印出来的数组不完整 ,会有省略号. 解决方法: 在php.ini里的xdebug节点中,加入如下 xdebug.var_displa ...