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

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

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <script src="../bower_components/angular/angular.js"></script>
  6.     <link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  7.     <title>经纬度转换控件</title>
  8.     <style>
  9.         .coordSpan {
  10.             position: relative;
  11.             display: inline-block;
  12.             height: 34px;
  13.             padding-right: 2px;
  14.         }
  15.         .coordInput{
  16.             height: 34px;
  17.             width: 40px; font-size: 14px;
  18.             border-radius: 4px;
  19.             border: 1px solid #ccc;
  20.             text-align: center;
  21.         }
  22.         .coordSign {
  23.             display: inline-block;
  24.             width: 3px; height: 4px;
  25.             position: absolute; top: 0;
  26.             right: -1px;
  27.         }
  28.     </style>
  29.  
  30.     <script>
  31.             var app = angular.module("app", [], function () {
  32.                 console.log("test");
  33.             });
  34.             app.controller("test", ["$scope", function ($scope) {
  35.                 $scope.longitude = 113.211;
  36.                 console.log($scope.longitude);
  37.                 $scope.$watch("longitude",function(newValue,oldValue) {
  38.                     console.log(newValue);
  39.                 });
  40.             }]);
  41.             app.directive("coordTransform", function () {
  42.                 return {
  43.                     restrict: 'E',
  44.                     scope: {
  45.                         ngModel:"="
  46.                     },
  47.                     templateUrl: function () {
  48.                         return "LongitudeAndLatitudeTemplate.html";
  49.                     },
  50.                     link: function (scope, elements, attrs) {
  51.                          if (angular.isUndefined(scope.ngModel)) {
  52.                              return "";
  53.                          }
  54.                          scope.obj = {
  55.                             du: null,
  56.                             fen: null,
  57.                             miao: null
  58.                         };
  59.                         var model = scope.ngModel.toString();
  60.                         var str = model.split(".");
  61.                          //度
  62.                         var du = str[0];
  63.                          //分
  64.                         var tp = "0." + str[1];
  65.                         var res = String(tp * 60);
  66.                         var str1 = res.split(".");
  67.                         var fen = str1[0];
  68.                         //秒
  69.                         var tp1 = "0." + str1[1];
  70.                         var miao = tp1 * 60;
  71.  
  72.                         scope.obj = {
  73.                             du: du,
  74.                             fen: fen,
  75.                             miao:miao
  76.                         };
  77.                         scope.$watch("obj", function (newValue, oldValue) {
  78.                             if (angular.isUndefined(oldValue) || angular.isUndefined(newValue)||oldValue===newValue) {
  79.                                 return;
  80.                             }
  81.                             var f = parseFloat(scope.obj.fen) + parseFloat(scope.obj.miao / 60);
  82.                             scope.ngModel = parseFloat(scope.obj.du) + parseFloat(f / 60);
  83.                            // scope.$apply(scope.ngModel);
  84.                         },true);
  85.                     }
  86.                 }
  87.             });
  88.     </script>
  89. </head>
  90.  
  91. <body ng-app="app" ng-controller="test">
  92.     <h1>这里是经纬度转换实例</h1>
  93.    <coord-transform ng-Model="longitude"></coord-transform>
  94.  
  95. </body>
  96. </html>

下面是模板的html文件

  1. <div>
  2.     <span class="coordSpan">
  3.         <input type="text" ng-model="obj.du" class="coordInput" />
  4.         <span class="coordSign">°</span>
  5.     </span>
  6.     <span class="coordSpan">
  7.         <input type="text"  ng-model="obj.fen" class="coordInput"/>
  8.         <span class="coordSign">'</span>
  9.     </span>
  10.     <span class="coordSpan">
  11.         <input type="text" ng-model="obj.miao" class="coordInput" />
  12.         <span class="coordSign"> "</span>
  13.     </span>
  14. </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. 【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来

    官网中有描述camera组件功能界面属性介绍,但是官网没有具体的demo让我们感受拍照的功能,今天写一篇demo来完善一下拍照的功能 demo 功能如下 第一步首先进行拍照功能 第二步 进行js页面跳 ...

  2. Tomcat服务器和Servlet版本的对应关系

    Tomcat服务器和Servlet版本的对应关系 Servlet 程序从2.5版本是现在世面使用最多的版本(xml配置) 到了Servlet3.0后.就是注解版本的Servlet使用

  3. phpstudy后门POC分析和EXP开发

    POC 2019年9月20日,网上传出 phpStudy 软件存在后门,随后作者立即发布声明进行澄清,其真实情况是该软件官网于2016年被非法入侵,程序包自带PHP的php_xmlrpc.dll模块被 ...

  4. 执行df hang住

    突然有一天发现df执行卡住了,一直不显示结果. $ df -h Filesystem Size Used Avail Use% Mounted on /dev/sda3 221G 100G 121G ...

  5. 学习Java第16天

    今天学习了HTML的表格,列表标签及表单. 顺序有点乱,明天学习swing awt,当时这部分大概过了一下,明天看视频 主要问题还是新概念较多,需要多理解,多记忆.

  6. 利用application在页面中显示访问次数

    在jsp页面中实现. <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  7. X000010

    P1829 [国家集训队]Crash的数字表格 / JZPTAB 题意:求 \({\rm S}(n,m)=\sum\limits_{i=1}^n\sum\limits_{j=1}^m{\rm lcm} ...

  8. git init和git init –bare的区别:

    感谢原文作者:ljchlx 原文链接:https://blog.csdn.net/ljchlx/article/details/21805231 git init 和 git init –bare 的 ...

  9. LNMP平台的redis对接安装

    LNMP平台的redis对接安装 目录 LNMP平台的redis对接安装 一.安装LNMP的各个组件 二.安装redis服务 三.安装redis扩展 四.修改php配置文件 五.测试连接 一.安装LN ...

  10. MySQL高级（进阶）SQL语句

    MySQL高级(进阶)SQL语句 目录 MySQL高级(进阶)SQL语句 一.实例准备--制表 1. 表1(商店区域表) 2. 表2(商店销售表) 3. 表3(城市表) 4. 表4(total_sal ...