本文主要包含基于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
<!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>
</div>
程序 主模块 ： 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);
</div>
控制器模块 ：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 = {"北京市": {"北京市": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]}, "上海市": {"上海市": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"]}, "天津市": {"天津市": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"]}, "重庆市": {"重庆市": ["万州区", "涪陵区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "黔江区", "长寿区", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "梁平县", "城口县", "丰都县", "垫江县", "武隆县", "忠县", "开县", "云阳县", "奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县", "江津市", "合川市", "永川市", "南川市"]}, "四川省": {"成都市": ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江县", "金堂县", "双流县", "郫县", "大邑县", "蒲江县", "新津县", "都江堰市", "彭州市", "邛崃市", "崇州市"], "自贡市": ["自流井区", "贡井区", "大安区", "沿滩区", "荣县", "富顺县"], "攀枝花市": ["东区", "西区", "仁和区", "米易县", "盐边县"], "泸州市": ["江阳区", "纳溪区", "龙马潭区", "泸县", "合江县", "叙永县", "古蔺县"], "德阳市": ["旌阳区", "中江县", "罗江县", "广汉市", "什邡市", "绵竹市"], "绵阳市": ["涪城区", "游仙区", "三台县", "盐亭县", "安县", "梓潼县", "北川羌族自治县", "平武县", "江油市"], "广元市": ["市中区", "元坝区", "朝天区", "旺苍县", "青川县", "剑阁县", "苍溪县"], "遂宁市": ["船山区", "安居区", "蓬溪县", "射洪县", "大英县"], "内江市": ["市中区", "东兴区", "威远县", "资中县", "隆昌县"], "乐山市": ["市中区", "沙湾区", "五通桥区", "金口河区", "犍为县", "井研县", "夹江县", "沐川县", "峨边彝族自治县", "马边彝族自治县", "峨眉山市"], "南充市": ["顺庆区", "高坪区", "嘉陵区", "南部县", "营山县", "蓬安县", "仪陇县", "西充县", "阆中市"], "眉山市": ["东坡区", "仁寿县", "彭山县", "洪雅县", "丹棱县", "青神县"], "宜宾市": ["翠屏区", "宜宾县", "南溪县", "江安县", "长宁县", "高县", "珙县", "筠连县", "兴文县", "屏山县"], "广安市": ["广安区", "岳池县", "武胜县", "邻水县", "华莹市"], "达州市": ["通川区", "达县", "宣汉县", "开江县", "大竹县", "渠县", "万源市"], "雅安市": ["雨城区", "名山县", "荥经县", "汉源县", "石棉县", "天全县", "芦山县", "宝兴县"], "巴中市": ["巴州区", "通江县", "南江县", "平昌县"], "资阳市": ["雁江区", "安岳县", "乐至县", "简阳市"], "阿坝藏族羌族自治州": ["汶川县", "理县", "茂县", "松潘县", "九寨沟县", "金川县", "小金县", "黑水县", "马尔康县", "壤塘县", "阿坝县", "若尔盖县", "红原县"], "甘孜藏族自治州": ["康定县", "泸定县", "丹巴县", "九龙县", "雅江县", "道孚县", "炉霍县", "甘孜县", "新龙县", "德格县", "白玉县", "石渠县", "色达县", "理塘县", "巴塘县", "乡城县", "稻城县", "得荣县"], "凉山彝族自治州": ["西昌市", "木里藏族自治县", "盐源县", "德昌县", "会理县", "会东县", "宁南县", "普格县", "布拖县", "金阳县", "昭觉县", "喜德县", "冕宁县", "越西县", "甘洛县", "美姑县", "雷波县"]}, "贵州省": {"贵阳市": ["南明区", "云岩区", "花溪区", "乌当区", "白云区", "小河区", "开阳县", "息