在Angular中，如何使用input type=text字段来只接受数字、负号和小数，别无其他

Question

言简意赅:我有两个文本框。

在这里:

<div data-ng-controller="customValidationAndNbrsCheckController">
     <label class="input">
        <number-only-input  placeholder="Latitude" input-value="wksLat.number" input-name="wksLat.name" />
     </label>
     <label>
        <number-only-input  placeholder="Longitude" input-value="wksLon.number" input-name="wksLon.name" />
     </label>     
</div>

这是我的指令:更新:问题解决了…这里的小提琴，显示了精确的变化，解决了这个问题。谢谢你的阅读，但我明白了。http://jsfiddle.net/vfsHX/

//Numbers only function
angular
    .module("isNumber", [])
    .directive('isNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope) {    
            scope.$watch('wksLat.number', function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.wksLat.number = oldValue;
                }
            });
            scope.$watch('wksLon.number', function (newValue, oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.wksLon.number = oldValue;
                }
            });
        }
    };
});

这是我的服务:

(function (app) {
debugger;
var customValidationAndNbrsService = function () {
    var customValidationAndNbrsServiceFactory = {};
    customValidationAndNbrsServiceFactory.settings = new mainApp.Models.Settings();
    customValidationAndNbrsServiceFactory.getSettings = function () {
        return customValidationAndNbrsServiceFactory.settings;
    };
    return customValidationAndNbrsServiceFactory;
};
app.factory("customValidationAndNbrsService", customValidationAndNbrsService);
}(angular.module("mainApp")));

这是我在Stack上找到的一个例子。

问题:这个工作很好，但是…

1. 文本框中的值以数字"1"开头;为什么?
2. 文本框将'不'允许破折号，小数与数字，但它不允许alpha字符。好。
3. 这是用于限制为50个字符的LAT/LON数据，可以使用maxlength='50'
4. inputValue和inputName结尾的"="符号是什么意思?这是一个标准吗?因为当我改变它，说一个"0"，认为这就是为什么"1"出现在文本框中，在Chrome调试器显示代码失败。

问题:我如何修改代码以"允许"破折号和小数，因为我们将LAT LONs输入为小数，而不是DD:MM:SS。

下面是可能的输入:25.2223332 LAT和-45.685464 LON

所以我希望版主不要删除这个问题。这是有效的，是的，我需要一个"修复我的代码"的帮助，因为这是我相信这个网站是为。

谢谢,每一个人。

Answer 1

来源于input-value="wksLon.number"

2。将您的值与regex

匹配

js

scope.$watch('inputValue', function (newValue, oldValue) {
  var arr = String(newValue).split("");
  if (arr.length === 0) return;
  if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
  if (arr.length === 2 && newValue === '-.') return;
  if (isNaN(newValue)) {
    scope.inputValue = oldValue;
  }
});

应该更改为您的设置，可能使用RegEx

之类的

scope.$watch('inputValue', function (newValue, oldValue) {
  var myRegex = /^(-)?d+(.d+)$/
  if (!myRegex.test(newValue) || newValue.length > 50) {
    scope.inputValue = oldValue
  }
});

3。length > 50

扩展2 × 3

4。这是一个相同名称

的数据绑定

<number-only-input  placeholder="Longitude" input-value="wksLon.number" input-name="wksLon.name" />

上面的元素input-value和input-name被绑定到相同的名称

scope: {
        inputValue: '=',
        inputName: '='
    },

但是如果你想用不同的，你可以这样写:

scope: {
        Value: '=inputValue',
        Name: '=inputName'
    },