Question

在下拉列表中我们有 Number and Decimalnumber

如果用户从下拉文本框中选择Number，则只允许输入数字（整数）例如22,33,444,345436。

不应允许输入小数值22.2,33.33,444.3333

如果用户从下拉列表中选择Decimalnumber，则相同的文本框应允许输入2decimals 例 22.2,33.33,444.23

var app = angular.module('plunker', []);

debugger;

app.controller('MainCtrl', function($scope) {

  $scope.selectedvalue = "Number";


  $scope.userinput = "";

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>



<body ng-controller="MainCtrl">

  please select
  <select ng-model="selectedvalue">
		  <option value="Number">Number</option>
		  <option value="Decimalnumber">Decimalnumber</option>
		</select><br>
  <p>Selected: {{selectedvalue}}</p>

  <input type="number" ng-model="userinput">

</body>

如何做到这一点请帮帮我..

Answer 1

添加此

<span ng-if="userinput == selectedvalue">
match
</span>

并更改

<input type="number" ng-model="userinput">

到

<input type="text" ng-model="userinput">

预期产出

<body ng-controller="MainCtrl">



 please select
  <select ng-model="selectedvalue">
          <option value="Number">Number</option>
          <option value="Decimalnumber">Decimalnumber</option>
        </select><br>
  <p>Selected: {{selectedvalue}}</p>

  <input type="text" ng-model="userinput">
  <span ng-if="userinput == selectedvalue">
    match
  </span>
</body>

Answer 2

您可以使用ng-pattern动态更改输入字段的规则。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.inputTypes = [{
     name: "Number",
     regex: "\\d+"  
  },
  {
     name: "Decimal",
     regex: "^\\d*\\.\\d{1,2}$"
  }];
  $scope.selectedregex = $scope.inputTypes[0].regex;
  $scope.userinput = "";
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="plunker" ng-controller="MainCtrl">

  please select
  <select ng-model="selectedregex">
     <option ng-repeat="type in inputTypes" value="{{type.regex}}">
        {{type.name}}
     </option>
  </select><br>
  <p>Selected regex: {{selectedregex}} </p>

  <form name="form">
    <input name="input" ng-pattern="selectedregex" ng-model="userinput" /><br />
    <span ng-show="!form.input.$valid">Please enter valid input</span>
  </form>
</div>

＆＃13;

Answer 3

首先你改变：

<input type="number" ng-model="userinput">

到

 <input type="text" ng-model="userinput">

然后

var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope) {

  $scope.selectedvalue = "Number";


  $scope.userinput = "";

  $scope.changeFun = function(e) {
    var tempInput = document.querySelector("#inputId").value;
    var regex = new RegExp("^[0-9]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);

    if($scope.selectedvalue === "Number") {
      if ((regex.test(str) || e.which === 8)) {
          return true;
      }
      e.preventDefault();
      return false;
    } else if($scope.selectedvalue === "Decimalnumber") {
      var regex = new RegExp("^[0-9]+$");
      var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
      if ((regex.test(str) || e.which === 8) && tempInput.indexOf(".") === -1) {
        console.log("comming 1111");
          return true;
      }


      if(tempInput.indexOf(".") === -1) {
        return true;
      }

      if(tempInput.indexOf(".") !== -1 && str !== ".") {
        var lastSubstr = tempInput.substring(tempInput.indexOf("."));
        if (lastSubstr.length < 3) 
        {
            return true;
        }
      }


      e.preventDefault();
      return false;
    }

  }
});

请参阅此链接：https://plnkr.co/edit/1fvI3grvZUzJCuqwJRXA?p=preview

如何根据angularjs中的下拉值验证文本框？

3 个答案: