基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

最新推荐文章于 2022-05-05 00:24:49 发布

梦想合伙人

最新推荐文章于 2022-05-05 00:24:49 发布

阅读量4.6w

点赞数 17

CC 4.0 BY-SA版权

分类专栏：架构师之路 Javascript 前端之追寻前沿技术文章标签： angularjs bootstrap javascript AngularStrap html5

本文链接：https://blog.csdn.net/zoutongyuan/article/details/39431299

本文介绍了如何使用AngularJS、Bootstrap和AngularStrap库来实现省市区联动的效果。AngularJS作为一个函数库，提供前端MVC开发方式，通过双向绑定简化DOM操作。Bootstrap是一个CSS库，而AngularStrap则是AngularJS中使用的Bootstrap组件库。通过一个简单的项目结构和代码示例，展示了AngularJS的双向绑定和指令的强大功能。作者建议深入学习官方文档和源码以掌握AngularJS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 AngularJs？网上一大堆资料，没能真正说明白。

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

<!DOCTYPE html>
<html lang="zh-CN" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>前端研究</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
    <div class="container" ng-controller="IndexCtrl">
        <h1 class="text-center text-danger">Angular 地址联动示例</h1>

        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-md-2 control-label">
                    地址
                </label>
                <div class="col-md-10">
                    <select required="" class="form-control" ng-model="address.province" ng-options="key as key for (key,value) in division"
                            ng-change="address.city='';address.district='';">
                        <option value="">省</option>
                    </select>
                    <select class="form-control" ng-model="address.city" ng-options="key as key for (key,value) in division[address.province]"
                            ng-change="address.district='';">
                        <option value="">市</option>
                    </select>
                    <select class="form-control" ng-model="address.district" ng-options="value as value for value in division[address.province][address.city]">
                        <option value="">区</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <button type="submit" class="btn btn-primary btn-sm" ng-click="submit()">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script src="lib/app.js"></script>
    <script src="lib/controllers.js"></script>
    <script src="lib/services.js"></script>
    <script src="lib/directives.js"></script>
    <script src="lib/filters.js"></script>
</body>
</html>