如何使用输入type = text字段仅接受数字，减号和小数，而Angular仅接受

Question

I'll be brief and to the point: I have two text boxes with angular.

Here it is:

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

Here's my directive: UPDATE: PROBLEM SOLVED... here's the fiddle that shows the EXACT change that fixes the problem. Thanks for reading but I got it. 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;
                }
            });
        }
    };
});

Here's my Service:

(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")));

This is from an example I found here on Stack.

PROBLEM: This works GREAT but...

1. The value in the text box starts out with the number "1"; why?
2. The text box will 'not' allow dashes, decimals with the numbers but, it does not allow alpha characters. Good.
3. This is for LAT/LON data restricted to 50 characters which does work as maxlength='50'
4. What does the "=" sign mean at the end of the inputValue and inputName? Is that a standard? because when I change it to, say a "0", thinking that's why the "1" appears in the text box, the debugger in Chrome shows code failures.

QUESTION: How do I modify the code to "allow" dashes and decimals, since we're entering the LAT LONs as decimal degrees and not DD:MM:SS.

Here's the possible input: 25.2223332 LAT and -45.685464 LON

So I hope the moderators do not delete this question. It's valid and yes, I need a "fix-my-code" help since that's what I believe this site is for.

Thanks, everyone.

Answer 1

1. comes from input-value="wksLon.number"

2. match your value to 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;
  }
});

this should be changed to your setup, probably with RegEx

something like that

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

3. extended 2 by 3 with length > 50

4. that's a data binding to same name

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

from above element input-value and input-name are binded with the same name

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

but if you want to use different you can do it like:

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