二维叉乘求三角形面积

Today we will look into Angular Form elements. We are all familiar with HTML forms and its usage. Therefore, I’m not going to discuss about the input controls in detail. In this post, we are going to discuss about forms in the AngularJS context.

今天，我们将研究Angular Form元素。我们都熟悉HTML表单及其用法。因此，我将不详细讨论输入控件。在本文中，我们将讨论AngularJS上下文中的表单。

A form is a collection of input controls like input, select, textarea. These input controls are ways for a user to enter data and a form is used for grouping related controls together.

表单是输入控件（例如input ， select ， textarea ）的集合。这些输入控件是用户输入数据的方式，并且使用表格将相关控件分组在一起。

角形 (Angular Form)

We have already seen some of the AngularJS features for binding data of HTML form input fields to the model object. These features make the developer’s task easier when working with forms.

我们已经看到了一些将HTML表单输入字段的数据绑定到模型对象的AngularJS功能。这些功能使使用表单时开发人员的工作更加轻松。

We use ng-model directive to bind an input field to a model property.

我们使用ng-model指令将输入字段绑定到模型属性。

角形文本字段 (Angular form text fields)

You are very much familiar with binding input text field to the model property and the value can be displayed using an expression within a pair of curly braces like {{form.name }}

您非常熟悉将输入文本字段绑定到model属性，并且可以使用一对大括号（例如{{form.name}}）中的表达式显示该值

<input type="text" id="name" ng-model="form.name">

This binding is bi-directional; meaning any change in the model is reflected in the view and vice versa.

这种绑定是双向的；意味着模型中的任何更改都会反映在视图中，反之亦然。

角形复选框 (Angular Form Check boxes)

The model property will be set to true if the check box is checked otherwise false. You can use the ng-true-value and ng-false-value directives if you want to use other values instead of true and false. We can use this in the following way:

如果选中此复选框，则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" >

In this example, the model property will be set to “yes” if it is checked otherwise it will be set to “no”.

在此示例中，如果选中model属性，则将其设置为“ yes” ，否则将其设置为“ no” 。

角形装订单选按钮 (Angular Form Binding Radio buttons)

We use ng-model directive to bind the selected radio button value to the model property.

我们使用ng-model指令将选定的单选按钮值绑定到model属性。

<input type="radio" value="male" />
<input type="radio" value="female" />

The form.gender will be set to male if we checked the radio button value equals male otherwise female.

如果我们检查单选按钮的值是否等于male，则form.gender将设置为male ，否则为female 。

角形示例 (Angular Form Example)

The following example demonstrates a simple form using angular features.

以下示例演示了使用角度特征的简单形式。

Define a FormController in the formApp.在formApp中定义一个FormController 。
We use two objects to handle the forms, master and employee and initially master object is set to empty.我们使用两个对象来处理表单，即master和employee，并且最初将master对象设置为空。
Two methods save and reset is used in this example.在此示例中，使用了两种保存和重置方法。
angular.copy is a function in the ng module used to create a deep copy of source, which should be an object or an array.angular.copy是ng模块中的一个函数，用于创建源的深层副本，该深层副本应该是对象或数组。
We bind the input value to the employee object and it is copied to the master object when we click on the save button.我们将输入值绑定到雇员对象，然后单击保存按钮将其复制到主对象。
The reset function will reset the fields with the values we entered before clicking the save button.重置功能将使用我们在单击保存按钮之前输入的值来重置字段。

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();});

The following HTML contains the form controls we used in our example and you can see how the binding takes place using the angular features.

以下HTML包含我们在示例中使用的表单控件，您可以看到如何使用角度特征进行绑定。

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>

The following code uses angularJS Filter feature to display the objects in JSON format.

以下代码使用angularJS筛选器功能以JSON格式显示对象。

<p>Employee Form = {{employee | json}}</p>
<p>Master = {{master | json}}</p>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

演示地址

That’s all for angular form, we will see the angularJS form validation in the next tutorial.

这就是角度形式的全部内容，我们将在下一个教程中看到angularJS形式验证。

翻译自: https://www.journaldev.com/7750/angular-form

二维叉乘求三角形面积