脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs 表单

实践中学习AngularJS表单

 更新时间：2016年03月21日 14:58:25   作者：fareise  
表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的

表单是最常用的一种组建。在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>

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

您可能感兴趣的文章:

相关文章

  • AngularJS学习笔记之表单验证功能实例详解

    AngularJS学习笔记之表单验证功能实例详解

    这篇文章主要介绍了AngularJS学习笔记之表单验证功能,结合实例形式分析了AngularJS针对表单的校验、监控等相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • AngularJS基础 ng-focus 指令简单示例

    AngularJS基础 ng-focus 指令简单示例

    本文主要介绍AngularJS ng-focus 指令,这里整理了ng-focus的一些基础资料,并附一个实例代码,有需要的小伙伴参考下
    2016-08-08
  • Angular异步变同步处理方法

    Angular异步变同步处理方法

    今天小编就为大家分享一篇Angular异步变同步处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS 面试题集锦

    AngularJS 面试题集锦

    本文主要介绍AngularJS的面试题资料整理，这里整理了相关面试题的资料，帮助大家学习理解AngularJS的知识，有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS语法详解

    AngularJS语法详解

    本文通过示例向大家介绍了AngularJS语法的使用，小伙伴们认真研读下吧，非常的实用哦。
    2015-01-01
  • AngularJS实现的生成随机数与猜数字大小功能示例

    AngularJS实现的生成随机数与猜数字大小功能示例

    这篇文章主要介绍了AngularJS实现的生成随机数与猜数字大小功能,结合完整实例形式分析了AngularJS随机数生成与数值判定相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • Angular.js前台传list数组由后台spring MVC接收数组示例代码

    Angular.js前台传list数组由后台spring MVC接收数组示例代码

    这篇文章主要给大家介绍了关于Angular.js前台传list数组之后，由后台spring MVC接收数组的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
    2017-07-07
  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    本文给大家介绍ANGULARJS中使用JQUERY分页控件，需要的朋友可以参考下
    2015-09-09
  • Angular HMR(热模块替换)功能实现方法

    Angular HMR(热模块替换)功能实现方法

    本篇文章主要介绍了Angular HMR(热模块替换)功能实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • AngularJS包括详解及示例代码

    AngularJS包括详解及示例代码

    本文主要介绍AngularJS包括的基础知识，这里整理了相关资料并附示例代码和实现效果图，有需要的小伙伴可以参考下
    2016-08-08

最新评论