实践中学习AngularJS表单

前端技术 2023/09/03 JavaScript

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

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

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

<div ng-app=\"\" ng-init=\"quantity=1;price=5\"> 
数量： <input type=\"number\" ng-model=\"quantity\"> 
价格： <input type=\"number\" ng-model=\"price\"> 
<p><b>总价：</b> {{ quantity * price }}</p> 
</div>

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

2.实现表单重置功能

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

HTML代码：

<div ng-app=\"myApp\" ng-controller=\"formCtrl\"> 
<form> 
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> 
</div>

JS代码：

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()函数，从而实现我们的功能。

3.实现表单下拉菜单选择域功能

在Angular中，实现下拉菜单很简单。我们可以利用ng-repeat指令来方便的实现一个下拉菜单：

首先，在js的模型中定义数据，数据格式如下：

var app = angular.module(\'myApp\', []); 
app.controller(\'myCtrl\', function($scope) { 
$scope.names = [\"Google\", \"Runoob\", \"Taobao\"]; 
});

然后，我们在html中，利用ng-repeat进行模型中数据的读取（具体含义见之前博客）

<div ng-app=\"myApp\" ng-controller=\"myCtrl\"> 
<select ng-model=\"selectedName\" ng-options=\"x for x in names\"> 
</select> 
</div>

关于下拉菜单，还涉及到从数据库、远程等读取数据，此外还有其他方法实现下拉菜单。这些将在之后进行讨论。

本文地址：https://www.stayed.cn/item/7719

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案