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 ...
随机推荐
- Divide and conquer:Telephone Lines(POJ 3662)
电话线 题目大意:一堆电话线要你接,现在有N个接口,总线已经在1端,要你想办法接到N端去,电话公司发好心免费送你几段不用拉网线,剩下的费用等于剩余最长电话线的长度,要你求出最小的费用. 这一看又是一个 ...
- 如何让VS2013编写的程序
总体分c++程序和c#程序 1.c++程序 这个用C++编写的程序可以经过设置后在XP下运行,主要的“平台工具集”里修改就可以. 额外说明:(1)程序必须为Dotnet 4.0及以下版本.(XP只支持 ...
- 手风琴特效 transition
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ExpandableListView的用法
ExpandableListView组件是android中一个比较常用的组件,当点击一个父item的时候可以将它的子item显示出来,像手机QQ中的好友列表就是实现的类型效果.使用Expandable ...
- .NET微信公众号开发-4.0公众号消息处理
一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们 ...
- eclipse快捷键Alt + / 失效
最近电脑上的Eclipse没有了自动提示功能,也不是全部不提示,大多数情况下按下"alt+/"键还会产生提示,但是当我在java项目中邪main方法和syso的时候,"a ...
- iOS 语录
1. 输入法切换: cmd + space 2. xcode 退出全屏control + cmd + f 3. xcode 代码格式化插件Uncrustify,XAlign, CLangFormat ...
- case/casez/casex 的区分与使用
参考:http://www.cnblogs.com/poiu-elab/archive/2012/11/02/2751323.html 与 verilog数字系统设计基础 一般来说,使用最多的是CA ...
- windows 远程桌面命令 mstsc
win+R------>mstsc: 弹出: 目标机必开远程
- EasyUi–8.datebox赋值的问题
这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$( ...