javascript - 输入类型编号的 ng-pattern-6ren

javascript - 输入类型编号的 ng-pattern

转载作者：行者123 更新时间：2023-11-29 21:22:01

26

4

我有一个 jsbin --> https://jsbin.com/yipigicuve/edit?html,console,output

根据链接，我有以下代码

<input ng-keypress="Num($event)" type="number" step=".1" ng-pattern="/^[+-]?(?:\d+\.?\d*|\d*\.?\d+)[\r\n]*$|^$/" ng-model="dataip"></>

$scope.Num = function (event) {
var keys = {
    'up': 38, 'right': 39, 'down': 40, 'left': 37,
    'escape': 27, 'backspace': 8, 'tab': 9, 'enter': 13, 'del': 46,
    '0': 48, '1': 49, '2': 50, '3': 51, '4': 52, '5': 53, '6': 54, '7': 55, '8': 56, '9': 57, 'dash':189, 'subtract':109
};
for (var index in keys) {
    if (!keys.hasOwnProperty(index)) continue;
    if (event.charCode == keys[index] || event.keyCode == keys[index]) {
        return; //default event
    }
}
event.preventDefault();
};

用户输入字母，但不被接受。有一些字母数字键被接受，如变量“keys”所示

提供了某些模式，以便可以接受空值、小数点。

我的问题是....jsbin 中的当前输入类型接受诸如“-2.34---45”或“3.4...345”之类的值

它应该只接受一次小数点和负号。即“3.5566”或“-23.33”

谁能告诉我如何使用 ng-pattern 来实现我的条件。

最佳答案

您可以简化您的生活并使用已经完成的工作。

使用这个指令:nksOnlyNumber .

您可以根据需要设置输入。

这是一个片段的工作:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {

  })
  .directive('nksOnlyNumber', function() {
    return {
      restrict: 'EA',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        scope.$watch(attrs.ngModel, function(newValue, oldValue) {
          var spiltArray = String(newValue).split("");

          if (attrs.allowNegative == "false") {
            if (spiltArray[0] == '-') {
              newValue = newValue.replace("-", "");
              ngModel.$setViewValue(newValue);
              ngModel.$render();
            }
          }

          if (attrs.allowDecimal == "false") {
            newValue = parseInt(newValue);
            ngModel.$setViewValue(newValue);
            ngModel.$render();
          }

          if (attrs.allowDecimal != "false") {
            if (attrs.decimalUpto) {
              var n = String(newValue).split(".");
              if (n[1]) {
                var n2 = n[1].slice(0, attrs.decimalUpto);
                newValue = [n[0], n2].join(".");
                ngModel.$setViewValue(newValue);
                ngModel.$render();
              }
            }
          }


          if (spiltArray.length === 0) return;
          if (spiltArray.length === 1 && (spiltArray[0] == '-' || spiltArray[0] === '.')) return;
          if (spiltArray.length === 2 && newValue === '-.') return;

          /*Check it is number or not.*/
          if (isNaN(newValue)) {
            ngModel.$setViewValue(oldValue || '');
            ngModel.$render();
          }
        });
      }
    };
  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="form">
    <input type="text" nks-only-number ng-model="dataip" decimal-upto="6" />
  </form>
</body>

</html>

关于javascript - 输入类型编号的 ng-pattern，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38314709/

26

4

0

文章推荐： javascript - 如何检查 DNSSEC 是否符合 nodejs？

文章推荐： javascript - 获取 Javascript 文件中特定行的代码

文章推荐： php - 仅卸载特定类型的数据库

文章推荐： Mysql通过分隔符将字符串(列)分割成新行

spring - / 和 /* 的区别
这个问题在这里已经有了答案: Difference between / and /* in servlet mapping url pattern (5 个回答) 4年前关闭。 web.xml 中的/
scala - 与连词的模式匹配(Pattern AND Pattern)
Scala 具有支持模式匹配中析取的语言功能(“模式替代”): x match { case _: String | _: Int => case _ => } 但是，如果审查满足 P
design-patterns - 我们可以在运行时为 Scala 类分配/更改特征吗？如何 - 任何示例代码？ Like Strategy Pattern (Gang of four Design Pattern)
解释我的问题: 类别:玩具特质 1:说话像男性特质2:说话像女性我能否在运行时更改 Toy 的行为(特征)，以便有时同一个对象说话像男性，有时同一个对象说话像女性？我想在运行时改变说话行为。
design-patterns - 鼠标适配器 : which pattern does it use?
我已经能够找到很好的资源，这些资源告诉我 Java API 中的 MouseAdapter 没有使用适配器模式。问题是:MouseAdapter 是否实现了某种模式？我知道它的作用:它为 Mouse
pattern-recognition - 如何: Pattern Recognition
我有兴趣了解有关模式识别的更多信息。我知道这是一个广泛的领域，所以我将列出一些我想学习处理的特定类型的问题: 在看似随机的字节集中查找模式。识别图像中的已知形状(例如圆形和正方形)。注意给定位置流
design-patterns - "Reactor Pattern"及其应用的简单解释
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
regex - ~/pattern/和 ~ "pattern"之间的区别？
所以，问题很简单:在 awk 中，if (var ~/pattern/) 是否与 if (var ~ "pattern") 相同？我已经对 csv 进行了一些基本测试，两者似乎都产生了相同的结果..
Java字符串标记化: Split on pattern and retain pattern
我的问题是 this 的 Scala (Java) 变体Python 上的查询。特别是，我有一个字符串 val myStr = "Shall we meet at, let's say, 8:45
java - 为什么 Pattern.pattern() 不嵌入标志？
我最近一直在研究正则表达式并注意到了这一点。 Pattern pNoEmbed = Pattern.compile("[ a-z]+", Pattern.CASE_INSENSITIVE); Patt
c++ - 相互友情指点 : What Pattern or anti-pattern is this?
在研究大型应用程序的 C++ 源代码时，我发现了这种模式(该示例的语法可能很粗略，但基本细节都在那里): class A : X friend B; B *parent; ...
design-patterns - 现实世界中使用 "Mediator pattern"的示例是什么？
有人可以举一个“中介者模式”在现实世界中有用的用例吗？最佳答案 Mediator是一种添加第三方对象以控制一组(2 个或更多)对象之间交互的方法。您能找到的最简单的示例是 Chat Room例如，
pattern-matching - OCaml 模式匹配变体中的 "Pattern expected"
尝试编译以下代码片段时: type 'a frame = Empty | Frame of string * 'a * 'a frame let rec searchFrame f s = match
java - / 供过滤器使用
目标我的目标是获得一个 servlet 过滤器来处理对主页的请求，然后再将它们转发到 index.jsp。问题我无法让过滤器接收来自“/”的请求。它的 URL 模式是 / 相反，对该模式的请求最
java - /* 错误
这个问题已经有答案了: Difference between / and /* in servlet mapping url pattern (5 个回答) 已关闭 6 年前。我已经设置了一个具有此
javascript - 斯托扬·斯特凡诺夫 : JavaScript Patterns - "The Default Pattern"
第 6 章(代码重用模式)中有以下示例: // the parent constructor function Parent(name) { this.name = name || 'Adam
java - pattern() 与 Pattern 类中的 toString()
Pattern类中的pattern()方法和toString()方法有什么区别？文档说: public String pattern() Returns the regular expression
javascript - ng-pattern 不显示 $error.pattern
我有脚本 here并且 ng-pattern 工作正常，因为 scope.subnet 仅在输入匹配模式后才显示在输出中。但是如果 ng-pattern 不匹配，ng-show 不会显示任何错误
java - pattern.matcher() 和 pattern.matches()
我想知道为什么当提供相同的正则表达式和相同的字符串时，java regex pattern.matcher() 和 pattern.matches() 的结果会不同 String str = "hel
design-patterns - 定义: Small Boy With A Pattern Syndrome
This SO answer引用“患有模式综合症的小男孩”。虽然我可以通过上下文推断出一些含义，但我并不完全理解。 “有模式综合症的小男孩”的良好定义是什么？最佳答案它只是意味着寻找将模式注入(i
design-patterns - 微服务 : aggregate data : is there some good patterns?
我有以下微服务架构的用例。我的问题是，在当前情况下，我有 3 个微服务和一个 APIGateway。最后，网关必须在聚合(组合)来自 3 个服务的数据之前进行大量查询。因为这 3 个微服务只提供基

首页

博学

6Ren·AI

商城

javascript - 输入类型编号的 ng-pattern