如何使用输入type = text字段仅接受数字，减号和小数，而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. 文本框中的值以数字“ 1”开头； 为什么？
2. 文本框将“不允许”使用破折号，带数字的小数，但不允许使用字母字符。 好。
3. 这适用于限制为50个字符的LAT / LON数据，其最大长度为'50'
4. inputValue和inputName末尾的“ =”符号是什么意思？ 这是标准吗？ 因为当我将其更改为“ 0”时，认为这就是为什么“ 1”出现在文本框中的原因，Chrome中的调试器显示了代码故障。

问题：由于我们将LAT LON输入为小数度而不是DD：MM：SS，因此如何将代码修改为“允许”破折号和小数。

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

因此，我希望主持人不要删除此问题。 这是有效的，是的，我需要“修复我的代码”帮助，因为我认为这是该网站的目的。

感谢大家。

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'
    },