javascript - 允许用户使用angularjs在输入框中只输入正数

标签 javascript angularjs

我想允许用户在文本框中只输入正数

我的代码如下:

script.js 文件内容:

angular.module("myfapp", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});

angular.module('myApp', []).controller('MainCtrl', function($scope) {
app.directive('validNumber', function() {
  return {
require: '?ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
  if (!ngModelCtrl) {
    return;
  }

  ngModelCtrl.$parsers.push(function(val) {
    var clean = val.replace(/[^0-9]+/g, '');
    if (val !== clean) {
      ngModelCtrl.$setViewValue(clean);
      ngModelCtrl.$render();
    }
    return clean;
  });

  element.bind('keypress', function(event) {
    if (event.keyCode === 32) {
      event.preventDefault();
    }
  });
}
};
});
});

angular.html内容如下:

<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>

<style>
.entry {
width: 300px;
margin: 10px auto;
text-align: center;
}
</style>

</head>
<body ng-app="myfapp">
<div ng-controller="HelloController" >
<h2 class="entry">Welcome {{ helloTo.title }} to the world of        Tutorialspoint!</h2>
</div>

<section ng-app="myApp" ng-controller="MainCtrl">
 <h4 class="entry">AngularJS Numeric Value Widget</h4>
<div class="well entry">
<label>Employee Age
  <input type="text" ng-model="employee.age"  placeholder="Enter an age"    valid-number/>
   </label>
</div>
</section>

</body>

</html>

为什么不起作用? 任何人都可以运行它并检查一下吗?

最佳答案

将您的输入类型更改为number,然后您可以使用min 指令来指定允许的最小数字。

<input type="number" ng-model="employee.age" placeholder="Enter an age" min="0"/>

关于javascript - 允许用户使用angularjs在输入框中只输入正数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34630263/

相关文章:

javascript - 提交动态生成的表单

javascript - 我可以使用RxJS进行面板间通信吗?

javascript - 在angularjs中使用外部小部件加载动态脚本 block

javascript - AngularJS - 将拖放与流程图相结合

javascript - 如何使用 JavaScript 将 HTML 表格转换为 Excel 文件?

javascript - 重置 Bootstrap 按钮状态

javascript - ASP.NET MVC 中动态生成 Javascript、CSS

javascript - 将折线图/面积图线延伸到图表边缘

javascript - AngularJs 通过 ng-repeat 进行分组

javascript - 单击某些屏幕上未显示的元素的“单击” MouseEvent