最近项目中，需要用户输入经纬度信息，因为数据库设计的时候，不可能分三个字段来存储这种信息，只能用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. DDD从入门到精通：基础篇

    这篇文章主要还是表述清楚DDD相关的基础概念,因为DDD入门有一定的专业名词,还是得有个基本的了解. 先讲解下领域模型作用: 对软件需求进行设计,维持其内在逻辑的一致性 1)划分边界.也是一种高内聚. ...

  2. gin源码解读3-gin牛逼的context

    Gin封装的最好的地方就是context和对response的处理. github的README的介绍,基本就是对这两个东西的解释. 本篇文章主要解释context的使用方法, 以及其设计原理 为什么 ...

  3. gin中的SecureJSON 防止 json 劫持

    使用 SecureJSON 防止 json 劫持.如果给定的结构是数组值或map,则默认预置 "while(1)," 到响应体. package main import ( &qu ...

  4. 不难懂------react-flux

    一.什么是Flux Flux 是一种架构思想,专门解决软件的结构问题.它跟MVC 架构是同一类东西,但是更加简单和清晰. 二.flux的基本概念 (1) .Flux由4部分组成 1.View:视图层 ...

  5. STM32定时器触发ADC多通道连续采样，DMA缓存结果

    STM32的ADC使用非常灵活,采样触发方面:既支持软件触发,定时器或其他硬件电路自动触发,也支持转换完成后自动触发下一通道/轮转换.转换结果存储方面:既支持软件读取和转存,也支持DMA自动存储转换结 ...

  6. Unity——日志打印工具

    一.日志工具功能 封装Debug类,需要实现功能: 1.控制所有日志是否打印: 2.除了Log,Warning,Error外,给更多日志种类(不同颜色): 3.格式化打印日志: 4.不定参数,自动拼接 ...

  7. Redis学习笔记（二）redis 底层数据结构

    在上一节提到的图中,我们知道,可以通过 redisObject 对象的 type 和 encoding 属性.可以决定Redis 主要的底层数据结构:SDS.QuickList.ZipList.Has ...

  8. .NET6: 开发基于WPF的摩登三维工业软件

    MS Office和VisualStudio一直引领着桌面应用的时尚潮流,大型的工业软件一般都会紧跟潮流,搭配着Ribbon和DockPanel风格的界面.本文将介绍WPF下两个轻量级的Ribbon和 ...

  9. 云服务器的windows系统上部署项目

    1.购买云服务器 以百度云服务器为例 https://cloud.baidu.com/campaign/midyear2020/index.html?track=cp:npinzhuan|pf:pc| ...

  10. php include,require,include_once,require_once 的区别

    include(),require(),include_once(),require_once()作用都是包含并运行指定文件,但是使用场景又有很大区别. 1.include()和require()的区 ...