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

最新推荐文章于 2022-05-03 20:52:29 发布

VIP文章梦想合伙人

最新推荐文章于 2022-05-03 20:52:29 发布

阅读量4.6w

点赞数 17

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

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

版权

什么是 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>

程序主模块： app.js

/**
 *@class index
 *@description App主模块,所有的模块被主模块引用
 *@time 2014-09-20 10:53
 *@author StarZou
 **/


var App = angular.module('App', ['mgcrea.ngStrap', 'App.controllers', 'App.services', 'App.directives', 'App.filters']);
console.log(App);

控制器模块：controllers.js

/**
 *@class controllers
 *@description 控制器模块,所以的控制器注册在此模块下
 *@time 2014-09-20 10:56
 *@author StarZou
 **/

var AppControllers = angular.module('App.controllers', ['mgcrea.ngStrap']);

AppControllers.controller('IndexCtrl', ['$scope', '$modal', function ($scope, $modal) {
    $scope.division = {"北京市": {"北京市": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]}, "上海市": {"上海市": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"]}, "天津市": {"天津市": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"]}, "重庆市": {"重庆市": ["万州区", "涪陵区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "黔江区", "长寿区", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "梁平县", "城口县", "丰都县", "垫江县", "武隆县", "忠县", "开县", "云阳县", "奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县", "江津市", "合川市", "永川市", "南川市"]}, "四川省": {"成都市": ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江县", "金堂县", "双流县", "郫县", "大邑县", "蒲江县", "新津县", "都江堰市", "彭州市", "邛崃市", "崇州市"], "自贡市": ["自流井区", "贡井区", "大安区", "沿滩区", "荣县", "富顺县"], "攀枝花市": ["东区", "西区", "仁和区", "米易县", "盐边县"], "泸州市": ["江阳区", "纳溪区", "龙马潭区", "泸县", "合江县", "叙永县", "古蔺县"], "德阳市": ["旌阳区", "中江县", "罗江县", "广汉市", "什邡市", "绵竹市"], "绵阳市": ["涪城区", "游仙区", "三台县", "盐亭县", "安县", "梓潼县", "北川羌族自治县", "平武县", "江油市"], "广元市": ["市中区", "元坝区", "朝天区", "旺苍县", "青川县", "剑阁县", "苍溪县"], "遂宁市": ["船山区", "安居区", "蓬溪县", "射洪县", "大英县"], "内江市": ["市中区", "东兴区", "威远县", "资中县", "隆昌县"], "乐山市": ["市中区", "沙湾区", "五通桥区", "金口河区", "犍为县", "井研县", "夹江县", "沐川县", "峨边彝族自治县", "马边彝族自治县", "峨眉山市"], "南充市": ["顺庆区", "高坪区", "嘉陵区", "南部县", "营山县", "蓬安县", "仪陇县", "西充县", "阆中市"], "眉山市": ["东坡区", "仁寿县", "彭山县", "洪雅县", "丹棱县", "青神县"],

最低0.47元/天解锁文章

梦想合伙人

关注

17
点赞
踩
24

收藏

觉得还不错? 一键收藏
11
评论
基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

什么是 AngularJs？网上一大堆资料，没能真正说明白。AngularJs 就是一个函数库，算不上一个框架，源码2万2千多行，提供了前端MVC的开发方式，有双向绑定，指令等特性，这是具有革命性的。我是多么反感jQuery 用选择器选择元素，绑定事件，进行一大堆DOM操作，一旦代码过多，非常不好维护，html结构改变，又要重写js代码,不过 jQuery 对 ajax的封装是其他框架匹敌不了的，接近于标准。我们看到控制器中的代码非常少，只有一行 $scope.division =
复制链接

扫一扫