最近项目中，需要用户输入经纬度信息，因为数据库设计的时候，不可能分三个字段来存储这种信息，只能用double类型来进行存储。

计算公式  double r=度+分/60+秒/3600

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="../bower_components/angular/angular.js"></script>

    <link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

    <title>经纬度转换控件</title>

    <style>

        .coordSpan {

            position: relative;

            display: inline-block;

            height: 34px;

            padding-right: 2px;

        }

        .coordInput{

            height: 34px;

            width: 40px; font-size: 14px;

            border-radius: 4px;

            border: 1px solid #ccc;

            text-align: center;

        }

        .coordSign {

            display: inline-block;

            width: 3px; height: 4px;

            position: absolute; top: 0;

            right: -1px;

        }

    </style>

    <script>

            var app = angular.module("app", [], function () {

                console.log("test");

            });

            app.controller("test", ["$scope", function ($scope) {

                $scope.longitude = 113.211;

                console.log($scope.longitude);

                $scope.$watch("longitude",function(newValue,oldValue) {

                    console.log(newValue);

                });

            }]);

            app.directive("coordTransform", function () {

                return {

                    restrict: 'E',

                    scope: {

                        ngModel:"="

                    },

                    templateUrl: function () {

                        return "LongitudeAndLatitudeTemplate.html";

                    },

                    link: function (scope, elements, attrs) {

                         if (angular.isUndefined(scope.ngModel)) {

                             return "";

                         }

                         scope.obj = {

                            du: null,

                            fen: null,

                            miao: null

                        };

                        var model = scope.ngModel.toString();

                        var str = model.split(".");

                         //度

                        var du = str[0];

                         //分

                        var tp = "0." + str[1];

                        var res = String(tp * 60);

                        var str1 = res.split(".");

                        var fen = str1[0];

                        //秒

                        var tp1 = "0." + str1[1];

                        var miao = tp1 * 60;

                        scope.obj = {

                            du: du,

                            fen: fen,

                            miao:miao

                        };

                        scope.$watch("obj", function (newValue, oldValue) {

                            if (angular.isUndefined(oldValue) || angular.isUndefined(newValue)||oldValue===newValue) {

                                return;

                            }

                            var f = parseFloat(scope.obj.fen) + parseFloat(scope.obj.miao / 60);

                            scope.ngModel = parseFloat(scope.obj.du) + parseFloat(f / 60);

                           // scope.$apply(scope.ngModel);

                        },true);

                    }

                }

            });

    </script>

</head>

<body ng-app="app" ng-controller="test">

    <h1>这里是经纬度转换实例</h1>

   <coord-transform ng-Model="longitude"></coord-transform>

</body>

</html>

下面是模板的html文件

<div>

    <span class="coordSpan">

        <input type="text" ng-model="obj.du" class="coordInput" />

        <span class="coordSign">°</span>

    </span>

    <span class="coordSpan">

        <input type="text"  ng-model="obj.fen" class="coordInput"/>

        <span class="coordSign">'</span>

    </span>

    <span class="coordSpan">

        <input type="text" ng-model="obj.miao" class="coordInput" />

        <span class="coordSign"> "</span>

    </span>

</div>

　项目地址：https://github.com/gdoujkzz/coord-transform.git

基于angularJs坐标转换指令(经纬度中的度分秒转化为小数形式 )的更多相关文章

  1. C#: 数字经纬度和度分秒经纬度间的转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  2. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  3. ocos2d-x 3.0坐标系详解--透彻篇 ---- convertToWorldSpace：把基于当前节点的本地坐标系下的坐标转换到世界坐标系中。

    convertToWorldSpace:把基于当前节点的本地坐标系下的坐标转换到世界坐标系中.重点说明:基于...   不一定要是真实的,  convertToWorldSpace 的结果也只是一个新 ...

  4. 在基于AngularJs架构的ABP项目中使用UEditor

    [前提须知] 读过此篇博客 了解angular-ueditor 了解ABP如何使用 会使用VS2017 [1.下载ABP模板] https://aspnetboilerplate.com/Templa ...

  5. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  6. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

  7. angularJS——ng-bind指令与插值的区别

    在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ...

  8. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  9. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

随机推荐

  1. 【简记】SpringBoot禁用Swagger

    楔子 Swagger 是 Java Web 开发中常用的接口文档生成类库,在开发和前后端联调时使用它来模拟接口调用能提高开发效率.但是,在生产环境可能并不需要它,一个原因是启用它会延长程序启动时间(动 ...

  2. Django settings.py配置文件

    import os BASE_DIR = os.path.dirname(os.path.dirname(__file__)) 这里用到了python中一个神奇的变量 file 这个变量可以获取到当前 ...

  3. Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址

    Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...

  4. gcc 11.2 在线升级

    环境:centos 7 1.准备开发环境 $ yum groupinstall "Development Tools" $ yum install glibc-static lib ...

  5. Linux性能优化实战（一）

    一.优化方向 1,性能指标 从应用负载的视角出发,考虑"吞吐"和"延时" 从系统资源的视角出发,考虑资源使用率.饱和度等 2,性能优化步骤 选择指标评估应用程序 ...

  6. StringUtils.isBlank(str)和StringUtils.isEmpty(str)的区别

    1.StringUtils.isEmpty(CharSequence cs)实现源码 public static boolean isEmpty(CharSequence cs) { return c ...

  7. Linux Shell脚本攻略复习

    1. 打开终端后的提示符中,$表示普通用户,#表示管理员用户root,root是linux系统中权限最高的用户. 2. shell脚本通常是一个#!起始的文本文件,其中#!位于解释器路径之前. 例如: ...

  8. Java开发调试技巧及Eclipse快捷键使用方法

    1. 快捷键 syso 通过打印输出来调试,println可接受object型的参数,能输出任何类型 Syso输出的是黑色字体,代表的是Debug的信息 Syse,输出的是红色字体,代表错误的输出信息 ...

  9. 关于synchronized(this)中this指的是什么意思

    public class SynchronizedDEmo { public static void main(String[] args) { TestThread tt = new TestThr ...

  10. hibernate中的映射文件xxx.hbm.xml详解总结

    转自 http://blog.csdn.net/a9529lty/article/details/6454924 一.hibernate映射文件的作用: Hibernate映射文件是Hibernate ...