Angular Form
今天，我们将研究Angular Form元素。
我们都熟悉HTML表单及其用法。
因此，我不会详细讨论输入控件。
在本文中，我们将讨论AngularJS上下文中的表单。
表单是输入控件(如" input"，" select"，" textarea")的集合。
这些输入控件是用户输入数据的方式，并且使用表格将相关控件分组在一起。
Angular Form
我们已经看到了一些将HTML表单输入字段的数据绑定到模型对象的AngularJS功能。
这些功能使使用表单时开发人员的工作更加轻松。
我们使用ng-model指令将输入字段绑定到模型属性。
Angular Form文本字段
您非常熟悉将输入文本字段绑定到model属性，并且可以使用一对大括号(例如{{form.name}})中的表达式显示该值
<input type="text" id="name" ng-model="form.name">
这种绑定是双向的；意味着模型中的任何更改都会反映在视图中，反之亦然。
Angular Form复选框
如果选中此复选框，则model属性将设置为true，否则为false。
如果要使用其他值代替true和false，则可以使用ng-true-value和ng-false-value指令。
我们可以通过以下方式使用它：
<input type="checkbox" ng-model="form.isPermanent" ng-true-value="yes" ng-false-value="no" >
在此示例中，如果选中模型属性，则将其设置为"是"，否则将其设置为"否"。
Angular Form装订单选按钮
我们使用ng-model指令将选定的单选按钮值绑定到model属性。
<input type="radio" value="male" <input type="radio" value="female"
如果我们选中单选按钮的值等于男性，则form.gender将设置为男性，否则为女性。
Angular Form示例
以下示例演示了使用Angular特征的简单 Form。
在formApp中定义一个FormController。
我们使用两个对象来处理表单，即master和employee，并且最初将master对象设置为空。
在此示例中，使用了两种保存和重置方法。
Angular.copy是ng模块中的一个函数，用于创建源的深层副本，该副本应该是对象或者数组。
我们将输入值绑定到雇员对象，然后单击保存按钮将其复制到主对象。
重置功能将使用我们在单击保存按钮之前输入的值来重置字段。
app.js
var app = angular.module('formApp', []);
app.controller('FormController', function($scope) {
$scope.master = {};
$scope.save= function(employee) {
$scope.master = angular.copy(employee);
};
$scope.reset = function() {
$scope.employee = angular.copy($scope.master);
};
$scope.reset();
});
以下HTML包含我们在示例中使用的表单控件，您可以看到如何使用Angular特征进行绑定。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Form Example</title>
</head>
<body ng-app="formApp">
<div ng-controller="FormController">
<form novalidate>
Name : <input type="text" ng-model="employee.name" <br
E-mail : <input type="email" ng-model="employee.email" <br
Role : <input type="radio" ng-model="employee.role" value="development" Development
<input type="radio" ng-model="employee.role" value="testing" Testing<br
<input type="button" ng-click="reset()" value="Reset"
<input type="submit" ng-click="save(employee)" value="Save"
</form>
<p>Employee Form = {{employee | json}}</p>
<p>Master = {{master | json}}</p>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
以下代码使用angularJS筛选器功能以JSON格式显示对象。
<p>Employee Form = {{employee | json}}</p>
<p>Master = {{master | json}}</p>
