亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

實(shí)踐中學(xué)習(xí)AngularJS表單

 更新時(shí)間：2016年03月21日 14:58:25   作者：fareise  
表單是最常用的一種組建。在Angular.js中，其實(shí)并沒有單獨(dú)的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點(diǎn)，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的

表單是最常用的一種組建。在Angular.js中，其實(shí)并沒有單獨(dú)的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點(diǎn)，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的。

1.根據(jù)輸入域數(shù)據(jù)實(shí)時(shí)更新輸出數(shù)據(jù)

下面代嗎實(shí)現(xiàn)了一個(gè)簡易的計(jì)算表單，它能將用戶輸入的數(shù)據(jù)進(jìn)行處理，并且實(shí)時(shí)顯示在表單輸出域中：

<div ng-app="" ng-init="quantity=1;price=5"> 
數(shù)量： <input type="number" ng-model="quantity"> 
價(jià)格： <input type="number" ng-model="price"> 
<p><b>總價(jià)：</b> {{ quantity * price }}</p> 
</div>

通過定義兩個(gè)ng-model，將用戶輸入的數(shù)據(jù)進(jìn)行實(shí)時(shí)監(jiān)聽，并且利用{{}}進(jìn)行數(shù)據(jù)的調(diào)用，擁幾行代碼就完成了一個(gè)建議的計(jì)算表單功能。

2.實(shí)現(xiàn)表單重置功能

下面的代碼實(shí)現(xiàn)了一個(gè)表單中經(jīng)常使用的功能：重置表單。

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對象，用來存放初始時(shí)刻表單輸入框的值。我們定義了一個(gè)reset()方法，該方法執(zhí)行后，利用angular.copy方法，將master中的值賦值給user，利用這樣的方法實(shí)現(xiàn)了表單域的重置。在HTML代碼中，我們使用ng-click鼠標(biāo)點(diǎn)擊事件觸發(fā)reset()函數(shù)，從而實(shí)現(xiàn)我們的功能。

3.實(shí)現(xiàn)表單下拉菜單選擇域功能

在Angular中，實(shí)現(xiàn)下拉菜單很簡單。我們可以利用ng-repeat指令來方便的實(shí)現(xiàn)一個(gè)下拉菜單：

首先，在js的模型中定義數(shù)據(jù)，數(shù)據(jù)格式如下：

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

然后，我們在html中，利用ng-repeat進(jìn)行模型中數(shù)據(jù)的讀?。ň唧w含義見之前博客）

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

關(guān)于下拉菜單，還涉及到從數(shù)據(jù)庫、遠(yuǎn)程等讀取數(shù)據(jù)，此外還有其他方法實(shí)現(xiàn)下拉菜單。這些將在之后進(jìn)行討論。

相關(guān)文章

最新評論