本文實例講述了AngularJS框架雙向數據綁定機制。分享給大家供大家參考，具體如下：
之前寫的一篇《AngularJS入門示例之Hello World詳解》 ，介紹ng-model的時候提到：使用AngularJS的雙向數據綁定機制，不需要我們編寫繁瑣的代碼來實現同樣的功能。現在我們看一個比較震撼的例子，看看angularJS是如何減少我們在前端開發中的繁瑣勞動的。越是感受到框架功能的強大，越是能夠激發學習的興趣和動力。
假如我們有一個學生信息列表，包含學生的姓名、地址和年齡信息。假如這個數據源信息保存在data.js文件中。
var g_phones = [ <span style="white-space:pre"> </span>{ "name": "wang xx", "address": "shanghai", "age": 20},{ "name": "li xx", "address": "beijing & shanghai", "age": 10},{ "name": "qian xx", "address": "xian", "age": 30},];現在要求實現以下功能：
1、學生信息列表，默認全部顯示，顯示順序跟數組順序一致。
2、提供一個搜索框，能夠進行模糊搜索。只要某個學生的name、address、age有一個符號搜索條件，就可以顯示。
3、提供一個選擇框，能夠按照name或者age對學生信息進行排序。
效果圖如下：
使用angularJS實現上述效果的代碼如下：
<!--ng-app和ng-controller都是angularJS框架的語法--><html ng-app ng-controller="RootController"> <head> <!-- 加載數據文件--> <script src="data.js"></script> <script src="angular-1.2.25.js"></script> <script> // angular中的控制器,即MVC模式中的C角色 function RootController($scope) { //讀取數據源,保存到angular的scope中 $scope.students = g_students; // 搜索字段(默認無條件,用空字符表示) $scope.queryProp = ''; // 排序字段(默認無排序,用空字符表示) $scope.orderProp = ''; } </script> </head> <body> <!--ng-model實現數據的雙向綁定--> Search: <input ng-model="queryProp"> Sort by: <select ng-model="orderProp"> <option value="name">name</option> <option value="age">age</option> </select> <!--遍歷students,對每個項stu，進行filter和orderBy--> <ul> <li ng-repeat="stu in students | filter:queryProp | orderBy:orderProp"> <p>{{stu.name}}</p> <p>{{stu.address}}</p> <p>{{stu.age}}</p> </li> </ul> </body></html>可以看到，實現上述功能，需要的所有HTML/JS代碼加起來不到40行，代碼是很簡潔的，很清晰。
如果不使用angularJS，我們使用JavaScript和jQuery來完成上述功能，我們必須要做的事情如下：
1、給search和sort 這2個控件，綁定事件處理函數。當搜索條件或者排序改變的時候，能夠實時刷新學生信息列表。
2、由于有排序，所以必須要編寫選擇排序或冒泡等排序算法，需要考慮字符串比較和數字比較這2種情況。
3、在JS中，通過字符串拼接的方式將<li>插入到DOM中。寫過這種代碼的都知道，JS中進行HTML字符串的拼接，非常的復雜。
可以看到使用傳統的JS開發方式，有很多重復繁瑣的勞動，如事件處理函數的綁定、復雜的html字符串拼接等。通過這個例子，很明顯可以看到使用angularJS開發效率遠遠高于JQuery和javascript這種傳統的開發方式。如果你還沒有感受到angularJS的強大和吸引力，那么我們再看一下關于angular的產生背景。下面是來自 大漠窮秋譯作《用AngularJS開發下一代Web應用》的前言。
“關于Angular 的起源，我可以追溯到2009 年的Google Feedback 項目。當時，對于項目的開發速度以及如何編寫可測試代碼的問題，我們已經經受了幾個月的折磨。6 個月時，我們開發了差不多17000 行前端代碼。這時候，團隊中的一個成員Misko Hevery 做出了一個大膽的宣言：利用他自己業余時間所開發的一個開源庫，他可以在兩周之內把目前所有東西重寫一遍。
我當時想，兩周的時間并不會給我們造成太大的影響，同時我們也接受了Misko 努力構建一些東西的想法。然而Misko 最終還是估算錯了時間，他用了三個星期。但是，我們所有人還是被他深深地震撼了，更讓我們感到震撼的是，他所開發的新應用的代碼量從原來的17000 行壓縮到了1500 行。看起來，Misko 的東西值得深入推廣。Misko 和我決定，圍繞他所提倡的理念組建一個團隊，這個簡單的理念就是：簡化對web 開發者的經驗要求。”
通過上面的背景介紹，可以看到angular確實能夠極大的減少代碼量，提高開發效率。行文至此，如果還是沒有激起您對angularJS的興趣和好奇，那么是我語言組織和表達能力不行，不是angular不行。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
