如何使用输入类型=文本字段仅接受数字，减号和小数，仅使用Angular

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. 文本框中的值以数字＆＃34; 1＆＃34;;开头。为什么呢？
2. 文本框不会是＆＃39;允许破折号，带数字的小数，但不允许使用字母字符。好。
3. 这是针对LAT / LON数据限制为50个字符，可以作为maxlength =＆＃39; 50＆＃39;
4. ＆＃34; =＆＃34; sign是否在inputValue和inputName的末尾？这是标准吗？因为当我改变它时，说一个＆＃34; 0＆＃34;，认为这是＆＃34; 1＆＃34;出现在文本框中，Chrome中的调试程序显示代码失败。

问题：如何将代码修改为＆＃34;允许＆＃34;破折号和小数，因为我们以十进制度而不是DD：MM：SS输入LAT LON。

这里有可能的输入：25.2223332 LAT和-45.685464 LON

所以我希望主持人不要删除这个问题。这是有效的，是的，我需要一个＆＃34; fix-my-code＆＃34;帮助，因为我认为这个网站是为了。

谢谢大家。

Answer 1

1。来自input-value="wksLon.number"

2。将你的价值与正则表达式相匹配

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" />

从上面的元素输入值和输入名称绑定了相同的名称

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

但是如果你想使用不同的，你可以这样做：

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