AngularJS中的表单简单入门
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
HTML 表单
HTML 表单通常与 HTML 控件同时存在。
AngularJS 表单实例
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
应用程序代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
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) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
运行结果：
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
注意： novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
实例解析
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
以上就是对AngularJS 表单资料的整理，后续继续补充，希望能帮助编程的同学。
相关文章
本文主要介绍了每一个独立的JS文件或者不同的控制器如何实现数据的共享与交互的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了angula中使用iframe点击后不执行变更检测问题，本文给大家分享解决方案，通过实例代码给的大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
利用Angular2的Observables实现交互控制的方法
这篇文章主要介绍了利用Angular2的Observables实现交互控制的方法，我们主要针对一些在跟服务器端交互的时候遇到的问题，来看看Observable给我们带来的特性。感兴趣的可以了解一下2018-12-12
Angular.js通过自定义指令directive实现滑块滑动效果
这篇文章主要给大家介绍了关于Angular.js如何通过自定义指令directive实现滑块滑动的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-10-10
最近在使用angular来做项目，功能要求实现一是点击按钮获取验证码，二是点击登录验证表单。之前用jquery来做项目很好做，使用angular怎么实现呢？其实实现代码也很简单的，下面通过实例代码给大家介绍下，需要的朋友参考下吧2017-05-05
详解Angular4中路由Router类的跳转navigate
这篇文章主要介绍了详解Angular4中路由Router类的跳转navigate，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了AngularJS中一般函数参数传递用法,结合实例形式分析了模型参数与普通参数的具体功能与使用技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了详解angularjs4部署文件过大解决过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了AngularJS表格样式简单设置方法,结合实例形式分析了AngularJS结合bootstrap针对表格样式的相关设置技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了使用angular-cli webpack创建多个包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
最新评论