AngularJS学习之表单
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学习之表单的更多相关文章
- AngularJs学习笔记-表单处理
表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule (2)模板式表单 在Angular中使用for ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- AngularJs入门之表单开发
本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...
- 使用angularjs实现注册表单
本文是在学习angularjs过程中做的相应的练习 github地址 https://github.com/2016Messi/angularjs1.6-form 演示地址 https://2016m ...
- 【AngularJS】—— 5 表单
这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝. 在AngularJS中,也支持html5中多种控件的自动检测,如:text.number.url.email.ra ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- 学习W3SCHOOL 表单验证
//表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
随机推荐
- MST:Agri-Net(POJ 1258)
Agri-Net 题目大意:农夫有一片农场,现在他要把这些田地用管子连起来,田地之间有一定距离,铺设每一段管子的长度与这些田地与田地距离是一样的,问你最小的铺设方案. 这一题很裸,Kruskal算法 ...
- codeforces 500B.New Year Permutation 解题报告
题目链接:http://codeforces.com/problemset/problem/500/B 题目意思:给出一个含有 n 个数的排列:p1, p2, ..., pn-1, pn.紧接着是一个 ...
- springmvc 文件下传、上载、预览。以二进制形式存放到数据库(转载)
springmvc 文件上传.下载.预览.以二进制形式存放到数据库.数据库中的关于传入附件的字段我写了2个:一个存放内容accessory,一个存放文件的后缀filetype 上传:首先需要2个必须的 ...
- MyEclipse/Eclipse中修改包的显示结构
操作如下:
- bootstrap弹出提示窗口功能
大家常用弹出提示成功或失败时候喜欢用alert,如果不用这个,写个弹窗又麻烦,bootstrap中就有个方法 alert("操作成功"); commonAlert("操作 ...
- xcode 自定义Eclipse里边常用的快捷键
之前在用Eclipse写Java的 时候,有几个常用的快捷键,比如删除当前行,在当前行下面插入空行,向上/下移动当前行等等,到了Xcode里怎么也找不到这些快捷键,一直觉得 Xcode自带的快捷键不够 ...
- 手工加载DLL
1.为了能找到dll的函数地址,生成dll时需要将其中的函数声明为C函数(extern "C"): #ifndef __MYDLL_H#define __MYDLL_H #ifde ...
- hdu1071(抛物线弓形面积阿基米德算法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1071 题意:给出抛物线的顶点和它与一直线的两交点,求他们围成的面积: 思路: 可以直接求出他们的方程式 ...
- java 接口与继承
一.继承条件下的构造方法调用 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构 ...
- jq div鼠标放上、离开马上展开、收缩方法
<body> <div id="aa" style="width:500px; height:30px; border:1px solid #000&q ...