Angularjs 地址联动2.1.1

简介: 这个地址联动是基于 Angularjs 的效果图如下:看着是不是可美观了?哈哈!源码如下:DOCTYPE HTML> Angularjs 地址联动 Angularjs 地址联动2.

这个地址联动是基于 Angularjs 的

效果图如下:

看着是不是可美观了?哈哈!源码如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Angularjs 地址联动</title>
    <link rel="stylesheet" href="js/plugins/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body ng-controller="appCtrl">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <div class="page-header" style="margin-bottom:200px;">
                <h1 class="text-center">Angularjs 地址联动2.1.1</h1>
            </div>

            <form class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-4 control-label">例子<span class="text-muted">(目前仅支持单例)</span></label>
                    <div class="col-sm-6">
                        <input select-address p="p" c="c" a="a" d="d" ng-model="xxx" placeholder="请选择所在地" type="text" class="form-control" />
                    </div>
                </div>
            </form>

        </div>
    </div>

    <!-- javascript
        ================================================== -->
    <script src="js/plugins/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="js/plugins/angular/angular.min.js" type="text/javascript"></script>
    <script src="js/selectAddress2.js" type="text/javascript"></script>
    <script src="js/index.js"></script>
</body>
</html>

哈哈,源码太多,直接提供下载地址:http://files.cnblogs.com/files/chenwolong/Address_Ang.rar

请务必将代码放入VS项目中,在本地会加载失败哦!

@陈卧龙的博客

相关文章
|
6月前
|
JavaScript 前端开发 UED
AngularJS路由管理:深度解析$routeProvider的应用与实践
【4月更文挑战第28天】本文深入解析AngularJS的$routeProvider,它是AngularJS路由系统的关键,用于定义应用的视图和路径。通过routeProvider,开发者能根据URL变化动态加载内容,实现单页应用效果。配置$routeProvider涉及导入angular-route.js,注入&quot;ngRoute&quot;依赖,并使用when方法定义路由规则。ng-view指令用于显示路由打开的页面,而otherwise方法处理未定义路由,提供默认响应。$routeProvider使导航体验优化,助力构建高效Web应用。
|
6月前
|
缓存 前端开发 UED
AngularJS的表单验证:深度探索与实践
【4月更文挑战第28天】本文深入探讨了AngularJS的表单验证,涉及基础用法、自定义规则和性能优化。AngularJS通过表单控制器和指令实现验证,ngModelController处理逻辑并更新错误状态。自定义验证器函数可扩展业务逻辑,性能问题可通过减少无效验证、异步处理和缓存解决。关注用户体验,提供清晰错误提示和一致验证规则至关重要。AngularJS的表单验证功能强大,适配复杂需求,助力构建高效、易用的验证系统。
|
6月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架,用于构建动态的单页面应用程序(SPA)。它提供了一种优雅而强大的方式来开发前端应用,具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
110 0
|
6月前
|
UED
深入了解 AngularJS 路由的原理和使用技巧
深入了解 AngularJS 路由的原理和使用技巧
100 0
|
监控
angularjs动态监控数据
angularjs动态监控数据
|
定位技术
angularJs集成百度地图
angularJs集成百度地图
118 0
|
JavaScript 容器 数据挖掘
Angularjs 与三方js插件配合使用,并通过模板动态解析angularjs 语法
在一个静态见面上做数据分析,由于前后端分离 前端使用Angularjs框架,后端使用RESTFUL,如图
2705 0