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