基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。

AngularJs 就是一个函数库，算不上一个框架，源码2万2千多行，提供了前端MVC的开发方式，有双向绑定，指令等特性，这是具有革命性的。我是多么反感jQuery 用选择器 选择元素 ，绑定事件，进行一大堆DOM操作，一旦代码过多，非常不好维护，html结构改变，又要重写js代码,不过jQuery 对 ajax的封装 是其他框架 匹敌不了的，接近于标准。

Bootstrap 是一个 css 库，对于搞后端出生的娃，比较友好。

AngularStrap 是一个 在AngularJs 中 使用的Bootstrap 组件库，比较友好。

对于任意的Javascript 函数库 与 框架，只要Javascript 基础扎实，研究一下,都可以 信手拈来，今天来使用AngularJs

来实现省市区联动，来体验一下 AngularJs双向绑定 不是盖的。

来看看我们的项目结构：

bower_components 下的库、框架 ， 是使用bower 安装的 。bower install 库 --save

lib 下面的是我们自己写的js。

先看我们的 页面：index.html

程序 主模块 ： app.js

控制器模块 ：controllers.js

我们看到控制器中的代码非常少，只有 一行 $scope.division =[]，$scope 是 控制器 与 View 的 桥梁，双向绑定的依据， 其实我们可以把省市区的数据放在 服务器上 ，然后用 $http 加载，而在htm 视图 中 只有 ng-options 这就是 angular 指令的 牛逼之处，其内部操作是 读取$scope 中的 数据，生成option 追加在select中.

通过一个简单的例子就可以 概述 angular 双向绑定，指令，对于要深入的全面的 学习angular，推荐看 官方文档 和源码，没有什么资料比这个好。

实现的效果：

以上所述是小编给大家介绍的基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码，希望能够帮助到大家！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!