【AngularJS】—— 5 表单
时间:2022-04-22
本文章向大家介绍【AngularJS】—— 5 表单,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。
在AngularJS中,也支持html5中多种控件的自动检测,如:text、number、url、email、radio、checkbox等等。
可以通过anuglar.copy()自动拷贝form表单的数据。
代码参考如下:
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="controller">
<form novalidate class="css-form">
Name: <input type="text" ng-model="user.name" required /><br>
E-mail: <input type="email" ng-model="user.email" required /><br>
Age: <input type="number" ng-model="user.age" min="1" max="99" required /><br>
Gender: <input type="radio" ng-model="user.gender" value="male"/>male
<input type="radio" ng-model="user.gender" value="female" />female<br>
<button ng-click="reset()">reset</button>
<button ng-click="update(user)">save</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
</style>
<script type="text/javascript">
function controller($scope){
$scope.master = {};
$scope.update = function(user){
$scope.master = angular.copy(user);
};
$scope.reset = function(){
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>
</body>
</html>
当表单数据填写正确时,背景现实绿色,当数据非法时,则现实红色。
使用save则把form中的数据保存到master中,使用reset就把master中的数据拷贝到form中。
运行结果参考:
- Hadoop数据分析平台实战——060深入理解MapReduce 01(案例)离线数据分析平台实战——060深入理解MapReduce 01(案例)
- 利用向量积(叉积)计算三角形的面积和多边形的面积
- HDU 1556 Color the ball
- Hadoop数据分析平台实战——080HBase介绍和安装离线数据分析平台实战——080HBase介绍和安装
- Hadoop数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)离线数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)
- ECJTUACM16 Winter vacation training #4 题解&源码
- Hadoop数据分析平台实战——090HBase shell客户端和Java Api介绍离线数据分析平台实战——090HBase shell客户端和Java Api介绍
- Hadoop数据分析平台实战——140Hive函数以及自定义函数讲解离线数据分析平台实战——140Hive函数以及自定义函数讲解
- 深入理解树状数组
- Codeforces 712C Memory and De-Evolution
- Codeforces 712B Memory and Trident
- Hadoop数据分析平台实战——110Hive介绍和Hive环境搭建离线数据分析平台实战——110Hive介绍和Hive环境搭建
- 干货|普通反爬虫机制的应对策略
- python基础-字符串与编码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 悬浮窗权限各机型各系统适配大全(总结)
- Android中Fragment相互切换间不被回收的实现方法
- Android手机管理工具类详解
- 通过代码学Sutton强化学习第四章动态规划
- android通过okhttpClient下载网页内容的实例代码
- Android自定义键盘的实现(数字键盘和字母键盘)
- Android iconify 使用详解
- XRecyclerView实现下拉刷新、滚动到底部加载更多等功能
- 浅析Android 快速实现图片压缩与上传功能
- Android处理时间各种方法汇总
- Android TextView Marquee的应用实例详解
- Android毛玻璃背景效果简单实现代码
- ClickHouse和他的朋友们(3)MySQL Protocol和Write调用栈
- ubuntu安装多个版本的CUDA并随时切换
- 如何在Ubuntu 18.04(实体机)上配置OpenWRT的开发环境