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

    package main import "fmt" // 一个函数中最多只可有一个可变参数, 如果参数列表中还有其它类型的参数,则可变参数写在最后 // 注意:参数不定,参数的个数 ...

  2. python09day

    内容回顾 文件操作初识 三步走: 打开文件open() 文件路径path,编码方式encoding=,mode(默认读) 操作文件(对文件句柄进行操作) 读.写.追加 各四种模式 读:read().r ...

  3. 学习JAVAWEB第九天

    ## XML: 1. 概念:Extensible Markup Language 可扩展标记语言 * 可扩展:标签都是自定义的. <user> <student> * 功能 * ...

  4. bom-client

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用df -h命令查看磁盘空间使用率不算高，还有很多空余空间，但是创建文件或写入数据时一直报错磁盘写满

    关于磁盘空间中索引节点爆满的问题还是挺多的,借此跟大家分享一下: 一.发现问题 在公司一台配置较低的Linux服务器(内存.硬盘比较小)的/data分区内创建文件时,系统提示磁盘空间不足,用df -h ...

  6. 常用获取inflate的写法

    1.             //context:上下文, resource:要转换成view对象的layout的id, root:将layout用root(ViewGroup)包一层作为codify ...

  7. JS实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始 ...

  8. 推荐一款仿iPhone桌面的代码. ___王朋.

    Demo:https://files.cnblogs.com/files/sixindev/LxGridView-master.zip 这是作者原来的效果图,很多东西还需要慢慢学习.作者用的很多类,根 ...

  9. 今天带大家了解一下ICMP协议及基本使用

    ICMP协议的介绍及基本使用 1.IP数据包头的格式 2.ICMP协议的功能介绍 3.ICMP的基本使用方法 1.在讲解ICMP协议之前,我们先来简单了解一下IP数据包格式如图所示: 2.好现在切入正 ...

  10. Feign的异步调用或者MQ调用与Security的问题处理；

    两大踩坑点: 一:部分框架自带有查询当前登录人的信息工具,无需各种本地线程栈ThreadLocals取Request啥的折磨自己: 二:Security自带有uri匹配的工具,没事多翻翻源码,原创方法 ...