1.HTML控件:以下HTML input元素被称为HTML控件:

**input元素

**select元素

**button元素

**textarea元素

2.AngularJS表单实例:

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

  <form novalidate>      //novalidate属性是在HTML5中新增的,禁用了使用浏览器的默认验证

First Name:<br>

  <input type="text" ng-model="user.firstName"></br>          //ng-model指令绑定了两个input元素到模型的user对象

  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){                //formCtrl函数设置了master对象的初始值,并定义了reset()方法

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

  $scope.reset=function(){                                     //reset()方法设置了user对象等于master对象

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

  };

  $scope.reset();

});

</script>

AngularJS学习之表单的更多相关文章

  1. AngularJs学习笔记-表单处理

    表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule   (2)模板式表单 在Angular中使用for ...

  2. AngularJS中的表单验证

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

  3. bootstrap基础学习【表单含按钮】(二)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. AngularJs入门之表单开发

    本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...

  5. 使用angularjs实现注册表单

    本文是在学习angularjs过程中做的相应的练习 github地址 https://github.com/2016Messi/angularjs1.6-form 演示地址 https://2016m ...

  6. 【AngularJS】—— 5 表单

    这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝. 在AngularJS中,也支持html5中多种控件的自动检测,如:text.number.url.email.ra ...

  7. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  8. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  9. 学习W3SCHOOL 表单验证

    //表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

随机推荐

  1. Tomcat中文乱码问题的原理和解决方法

    1) 更改 D:\Tomcat\conf\server.xml,指定浏览器的编码格式为“简体中文”: 方法是找到 server.xml 中的 <Connector port="8080 ...

  2. 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍

    因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文. 以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言大神 ...

  3. 【leetcode】Sort List (middle)

    Sort a linked list in O(n log n) time using constant space complexity. 思路: 用归并排序.设输入链表为S,则先将其拆分为前半部分 ...

  4. 【编程之美】CPU

    今天开始看编程之美 .第一个问题是CPU的使用率控制,微软的问题果然高大上,我一看就傻了,啥也不知道.没追求直接看答案试了一下.发现自己电脑太好了,4核8线程,程序乱飘.加了一个进程绑定,可以控制一个 ...

  5. IIS7.0配置网站时,提示“ISAPI 和 CGI 限制”

    把网站配置到IIS上的时候,访问网站提示如下错误:  

  6. INNODB

    INNODB,是Mysql5.7的默认存储引擎,是事务安全的,支持ACID,具有提交,回滚和crash-recovery[灾备]能力,以保护用户数据. 优势:一旦Server崩溃,Innodb会自动保 ...

  7. Ruby on Rails 接口无法调试的问题

    1. 客户端 ip 与服务器 ip需要在同一网段 2. 如果 rails 版本是4.2及以上需要通过 rails s -b 0.0.0.0启动 3. 跑服务的mac需要关闭防火墙

  8. NYOJ题目817英文藏头诗

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtEAAAKXCAIAAADLqoEhAAAgAElEQVR4nO3dO1LrzNbG8W8S5AyE2D

  9. 关于android的单位dp与px

    原文:Android中dp和px之间进行转换 官方文档:http://developer.android.com/guide/practices/screens_support.html The de ...

  10. 聊聊SOA面向服务架构

    什么是SOA SOA(Service-Oriented Architecture),即面向服务的架构.SOA是一种粗粒度.松耦合服务架构,服务之间通过简单.精确定义接口进行通讯,不涉及底层编程接口和通 ...