AngularJS 表单是输入控件的集合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单</title>

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

</head>

<body>

<div ng-app="myApp" ng-controller="formCtrl">

    <form novalidate>

        First Name:<br>

        <input type="text" ng-model="user.firstName"><br>

        Last Name:<br>

        <input type="text" ng-model="user.lastName">

        <br><br>

        <button ng-click="reset()">RESET</button>

    </form>

    <p>form = {{user}}</p>

    <p>master = {{master}}</p>

</div>

<script>

    var app = angular.module('myApp', []);

    app.controller('formCtrl', function($scope) {

        $scope.master = {firstName: "John", lastName: "Doe"};

        $scope.reset = function() {

            $scope.user = angular.copy($scope.master);

        };

        $scope.reset();//默认初始化调用一次

    });

</script>

</body>

</html>

赋值时候是这样的：　

　

点击RESET之后：

说明：

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法，且在点击按钮时调用。

novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

AngularJS(9)-表单的更多相关文章

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

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

  2. angularJS 过滤器 表单验证

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

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

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

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

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

  5. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  6. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

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

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

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

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

  9. Angularjs之表单实例（三）

    正确引用js css文件后可运行 <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstr ...

随机推荐

  1. 【ZZ】C 语言中的指针和内存泄漏 & 编写高效的C程序与C代码优化

    C 语言中的指针和内存泄漏 http://www.ibm.com/developerworks/cn/aix/library/au-toughgame/ 本文讨论了几种在使用动态内存分配时可以避免的陷 ...

  2. python 学习笔记re

    在学习python的过程中很多时候都需要用到re(正则),因为我也不是开发所以呢只是简单说一下经常需要用到的东西. 在工作中经常用到的主要是三个函数:1.math   2.search   3.sub ...

  3. Android+Robotium

    因为调动到一个新的部门在这个部门做的一直就是移动产品,所以这段时间会一直不断的研究app的自动化,主要是针对android,这里我采用的是Robotium框架,这个框架比较简单,使用eclipse+r ...

  4. 基于PHP的对接电子面单接口平台案例

    电子面单接口目前有三种对接方式,快递电子面单接口.菜鸟电子面单接口和快递鸟电子面单接口.这三种接口各有特点. 一.电子面单接口定义 1. 快递电子面单接口:快递公司自己开发的电子面单服务, 商家使用必 ...

  5. ASP.NET获取URL

    //获取完整url (协议名+域名+站点名+文件名+参数) string fullUrl = Request.Url.ToString(); //获取客户端请求的URL信息(不包括主机和端口) str ...

  6. iptables常用命令

    常规: iptables -t filter -A INPUT -d -p tcp --dport -j DROPiptables -A INPUT -m iprange --src-range 22 ...

  7. Angular 2.0 从0到1：Rx--隐藏在Angular 2.x中利剑

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

  8. CSS理解之padding--非原创

    因为在慕课网观看了张大神的视频,学习到了一点东西,向和大家分享.视频地址 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...

  9. (转载）运行主机管理在openvswitch之上

    在这篇文章里介绍了如果运行主机管理在openvswitch之上,而不是单独配置一个物理网卡用于主机管理,并且所有的vm的流量还是通过openvswitch走的. Running Host Manage ...

  10. android NDK 开发步骤

    NDK开发一般分为一下几个步骤:(默认你已经安装好了NDK和android开发环境) 1.创建一个项目 2.创建JNI目录 3.编写nativejava层方法 4.生成JNI头文件 (1)编写java ...