本文阐述了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 '，'现在需要以下功能：

1.默认显示所有学生信息列表，显示顺序与数组顺序一致。2.提供搜索框进行模糊搜索。只要学生的姓名、地址和年龄有符号搜索条件，就可以显示出来。3.提供一个选择框，可以按姓名或年龄对学生信息进行排序。

效果图如下：

使用angularJS实现上述效果的代码如下：

！-ng-app和ng-controller是angularJS框架的语法-html ng-app ng-controller='根控制器'头！-在数据文件中加载控制器-script src=' http : data . js '/script script src=' http 3360 angular-1 . 2 . 25 . js '/script script//angular。即MVC模式中的C角色函数根控制器($ scope){//读取数据源保存在angular scope $ scope . studies=g _ studies；//搜索字段(默认无条件，用空字符表示)$ scope.queryProp=//排序字段(默认不排序，用空字符表示)$ scope.orderProp=}/脚本/头体！- ng-model实现数据的双向绑定-search:输入ng-model=' query prop '按：排序选择ng-model=' order prop '选项值=' name' name/option选项值=' age' age/option/select！-遍历学生，每项stu，Make filter and order by-ul Li ng-repeat=' stu in stu | filter : query prop | order by : order prop ' P { { stu . name } }/P P { { stu . address } }/P { { stu . age } }/P/Li/ul/body/HTML可以看出，实现上述功能所需的所有HTML/JS代码加起来不到40行，代码非常简洁明了。

如果我们不使用angularJS，我们使用JavaScript和jQuery来完成上述功能，我们必须做到以下几点：

1.将事件处理函数绑定到搜索和排序这两个控件。当搜索条件或排名发生变化时，可以实时刷新学生信息列表。

2.因为排序，必须编写选择性排序或冒泡等排序算法，要考虑字符串比较和数字比较。

3.在JS中，通过字符串拼接的方式将li插入到DOM中。任何写过这段代码的人都知道，在JS中拼接HTML字符串是非常复杂的。

可以看出，使用传统的JS开发方法，有很多重复且繁琐的工作，比如绑定事件处理函数、复杂的html字符串拼接等等。通过这个例子，很明显使用angularJS比JQuery和javascript要高效得多。如果你还没有感受到angularJS的力量和吸引力，那就来看看angular的背景吧。以下是沙漠翻译《用AngularJS开发下一代Web应用》的序言。

“至于Angular的起源，我可以追溯到2009年的Google Feedback项目。当时，我们已经为项目开发的速度和如何编写可测试的代码而苦恼了几个月。在六个月的时间里，我们开发了将近17，000行前端代码。这时，团队成员Misko Hevery做了一个大胆的声明：利用自己在业余时间开发的开源库，两个星期就可以改写目前的一切。

当时我觉得两个星期对我们影响不大，我们也接受了Misko想建点东西的想法。然而，米斯科最终算错了时间，花了他三个星期。然而，我们所有人都被他深深震撼了，更让我们震惊的是，他开发的新应用程序的代码量从17000行减少到了1500行。看来米斯科的东西值得推广。米斯科和我决定围绕他倡导的理念组建一个团队。这个简单的想法是为了简化web开发人员的体验需求。"

通过上面的背景介绍，我们可以看到angular可以大大减少代码量，提高开发效率。到目前为止，如果你还没有引起你对angularJS的兴趣和好奇心，那么我的语言组织和表达能力都不好，没有棱角。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。