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 表单资料的整理，后续继续补充，希望能帮助编程的同学。
-
问题内容： 我正在学习AngularJs的学习过程，发现几乎没有任何示例可用于现实世界。 我试图对如何使用最标准的组件提交表单并将其传递给PHP文件有一个清晰的了解。 我的小提琴。 有人在提交简单，无污染的表单方面有什么好的例子吗，这些表单会对我以及其他许多Angularjs初学者有所帮助。 当我说一个干净的表格时，我指的是这样的东西。 我的ng-app代码… 我猜我接下来要问的三个问题是… 我的
-
问题内容： 我有一个活动的编辑页面，我的一个字段是日期。在某些浏览器中，它看起来像纯文本框（IE8），但是在chrome中，它显示“ dd / mm / yyyy”，如果单击它，它还有一些其他选项可用于设置日期。 我的问题是在编辑页面上，它没有填充现有日期（我想是因为日期格式不正确？）。MVC控制器以“ 2014-03-08T00：00：00”格式返回数据（仅使用基本的CRUD控制器操作）。 我已
-
我刚开始学反应。我创建了一个简单的表单。现在我想登录控制台。但它给出了一个错误。 以下是错误的图像： 同时附上我的代码：
-
本文向大家介绍Angularjs中ng-repeat的简单实例，包括了Angularjs中ng-repeat的简单实例的使用技巧和注意事项，需要的朋友参考一下 Angularjs中ng-repeat的简单实例 第一个例子：使用ng-repeat最简单的例子 第二个例子：添加过滤条件 以上就是AngularJs 中ng-repent的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮
-
本文向大家介绍AngularJS中的API（接口）简单实现，包括了AngularJS中的API（接口）简单实现的使用技巧和注意事项，需要的朋友参考一下 AngularJS API API 意为 Application Programming Interface（应用程序编程接口）。 AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集
-
本文向大家介绍AngularJS中$http使用的简单介绍，包括了AngularJS中$http使用的简单介绍的使用技巧和注意事项，需要的朋友参考一下 在AngularJS中主要使用$http服务与远程http服务器交互，其作用类似于jquery中的$.ajax服务： $http是AngularJS的一个核心服务，利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务