AngularJS中的表单应用一二

　　表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。

　　1.根据输入域数据实时更新输出数据

　　下面代吗实现了一个简易的计算表单，它能将用户输入的数据进行处理，并且实时显示在表单输出域中：

　　[html] view plain copy print?

　　数量：

　　价格：

　　总价： {{ quantity * price }}

　　通过定义两个ng-model，将用户输入的数据进行实时监听，并且利用{{}}进行数据的调用，拥几行代码就完成了一个建议的计算表单功能。

　　2.实现表单重置功能

　　下面的代码实现了一个表单中经常使用的功能：重置表单。

　　HTML代码：

　　[html] view plain copy print?

　　First Name:

　　Last Name:

　　RESET

　　form = {{user}}

　　JS代码：

　　[javascript] view plain copy print?

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

　　});

　　在JS控制器代码中，我们定义了master对象，用来存放初始时刻表单输入框的值。我们定义了一个reset()方法，该方法执行后，利用angular.copy方法，将master中的值赋值给user，利用这样的方法实现了表单域的重置。在HTML代码中，我们使用ng-click鼠标点击事件触发reset()函数，从而实现我们的功能。