Question

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

我的代码如下：

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>

为什么不起作用？任何人都可以运行它并检查！

Answer 1

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

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

Answer 2

您的代码存在很多问题。

您已嵌套ng-app这是不允许正常使用的，请使用一个ng-app多个ng-controller。
您需要在restrict内使用directive将其使用限制为一种或多种类型（即A =属性，E =元素，C =类），例如{{1} }}
指定restrict: "A"时，通常最好使用数组，最后一个元素为controller controller，第一个元素为function {{1你正在使用字符串格式
@MajidYaghouti 建议使用services，但如果您坚持使用指令，我会对您的代码进行一些更正。
使用一些代码格式化dude，并谨慎而优雅地命名你的东西。

你的script.js

factories

和你的index.html

ng-change

更新plunkr

允许用户使用angularjs在输入框中仅键入正数

2 个答案: