最近项目中，需要用户输入经纬度信息，因为数据库设计的时候，不可能分三个字段来存储这种信息，只能用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. gin框架中的重定向

    重定向redirect func someRedirect(context *gin.Context) { context.Redirect(http.StatusMovedPermanently, ...

  2. golang中数组指针与指针数组的区别实现

      指针数组和数组的指针,指的是两个不同的东西. 指针数组是有指针组成的数组,数组的指针是一个数组的指针. package main import "fmt" const MAX ...

  3. Filter-完整的用户登录和权限检查

    Filter过滤器的使用步骤: 1,编写一个类去实现Filter接口 2,实现拦截(过滤)方法doFilter() 3,到web.xml中配置Filter的拦截路径 补充login.jsp登录页面 编 ...

  4. IoC容器-Bean管理XML方式（注入空值和特殊符号）

    Ioc操作Bean管理(xml注入其他类型属性), 字面量 (1)null值 (2)属性值包含特殊符号

  5. lvs的三种模式

    一.NAT模式(VS-NAT) 原理:就是把客户端发来的数据包的IP头的目的地址,在负载均衡器上换成其中一台RS的IP地址,并发至此RS来处理,RS处理完成后把数据交给经过负载均衡器,负载均衡器再把数 ...

  6. Method com/mchange/v2/c3p0/impl/NewProxyResultSet.isClosed()Z is abstract

    HTTP Status 500 - Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method ...

  7. 列表页面（html+css+js）

    html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  8. ApacheCN PHP 译文集 20211101 更新

    PHP 入门指南 零.序言 一.PHP 入门 二.数组和循环 三.函数和类 四.数据操作 五.构建 PHP Web 应用 六.搭建 PHP 框架 七.认证与用户管理 八.建立联系人管理系统 使用 PH ...

  9. 计算机电子书 2020 CDNDrive 备份（预览版 II）

    下载方式 pip install CDNDrive # 或 # pip install git+https://github.com/apachecn/CDNDrive cdrive download ...

  10. 「JOI 2014 Final」飞天鼠

    「JOI 2014 Final」飞天鼠 显然向上爬是没有必要的,除非会下降到地面以下,才提高到刚好为0. 到达一个点有两种情况:到达高度为0和不为0. 对于高度不为0的情况,显然花费的时间越少高度越高 ...