【14】AngularJS 表单
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
- input 元素
- select 元素
- button 元素
- textarea 元素
HTML 表单
HTML 表单通常与 HTML 控件同时存在。
AngularJS 表单实例
应用程序代码
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
FirstName:<br>
<input type="text" ng-model="user.firstName"><br>
LastName:<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>
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。 |
实例解析
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法,且在点击按钮时调用。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。
【14】AngularJS 表单的更多相关文章
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- AngularJS 表单
AngularJS 表单是输入控件的集合. HTML控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 H ...
- AngularJS学习之旅—AngularJS 表单(十六)
一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- AngularJs(Part 9)--AngularJS 表单
AngularJS 表单 AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...
- laravel基础课程---14、表单验证(lavarel如何进行表单验证)
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- javascript权威指南第14章 表单脚本示例代码
HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
随机推荐
- bzoj 4198: [Noi2015]荷马史诗【哈夫曼树+贪心】
和合并果子类似(但是是第一次听说哈夫曼树这种东西) 做法也类似,就是因为不用知道树的形态,所以贪心的把最小的k个点合为一个节点,然后依次向上累加即可,具体做法同合并果子(但是使用优先队列 注意这里可能 ...
- RabbitMq安装成功后执行命令报错(Error: unable to connect to node 'rabbit@DESKTOP-LPKSION': nodedown)
我们直接来看解决方案吧.首先打开服务,找到RabbitMq服务. 双击打开后选择登陆选项卡: 点选此账户,输入你计算机的登录名称.点击浏览: 在这里输入你的用户名,点检索: 这里的密码输入你电脑开机登 ...
- linux centos7安装mysql
1.下载并安装官方的 yum repository (新建了mysql文件夹) wget -i -c http://dev.mysql.com/get/mysql57-community-releas ...
- c++ string函数合集
s.substr(x,len) 在s中取出从x位置开始,长度为len的字符串,并返回string类型的字符串. s.find(a) 在s中查找字符串a,并返回起始下标(从0开始),若不存在,返回184 ...
- Spring Boot (30) 上传文件
文件上传 上传文件和下载文件是Java Web中常见的一种操作,文件上传主要是将文件通过IO流传输到服务器的某一个文件夹下. 导入依赖 在pom.xml中添加上spring-boot-starter- ...
- System.AppDomain类详解(二)
进程是存在独立的内存和资源的,但是AppDomain仅仅是逻辑上的一种抽象.一个process可以存在多个AppDomain.各个AppDomain之间的数据时相互独立的.一个线程可以穿梭多个AppD ...
- Meta标签 h5
一 PC端meta标签 1 页面关键词 <meta name="keywords" content="your tags"> 2 页面描述 < ...
- 浅谈css的行内类型标签和块级标签
常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...
- 用DataReader 分页与几种传统的分页方法的比较
对于数据库的分页,目前比较传统的方法是采用分页存储过程,其实用 DataReader 也可以实现分页,不需要写存储过程,实现效率上也比几种比较流行的分页方法要略快. 在开始这个方法之前,让我们先创建一 ...
- Sqoop hive 和mysql 交互 完整案例
本文完成:在hive里建管理表:注入部分数据:利用sqoop导入mysql中 期间:解决中文乱码问题 飞行报告故障表 建表命令 查看表 人工灌入少量数据 Windows系统向Linux系统数据传输 ...