Question

<label for="updateInterval" class="control-label"  for="UpdateInterval">Select Interval</label>    
<input name="intervalRange" id="intervalRange" ng-pattern="" type="number" class="form-control input-medium fld-updateinterval-val" placeholder=""  ng-model="update_interval" ng-required="true" >

<select class="form-control input-medium sampleForm-combo" onchange="changetextbox(this.value)" id="action" ng-model="update_intervalSelect" ng-required="true">
    <option></option>
    <option value="days">days</option>
    <option value="hours">hours</option>
</select>

上面我有一个输入框和一个下拉列表，其中在第一个文本框中输入的值取决于在下拉列表中选择的值。 JavaScript正在阅读它，但我的问题是ng-pattern没有运行，我不知道为什么。如果我在Firebug中检查它，则会显示ng-pattern被放入文本框中，但我不确定为什么我仍然能够输入不在我指定的范围内的数字。

function changetextbox(interval)
{
if(interval == "days"){
    $(".fld-updateinterval-val").attr("placeholder", "1-365");
    $(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/");
}

else if (interval == "hours"){
    $(".fld-updateinterval-val").attr("placeholder", "1-8760");
    $(".fld-updateinterval-val").attr("ng-pattern", "/\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b/");
}

Answer 1

只需将ng-pattern作为属性添加到输入标记或像上面那样更改它就不会起作用。它需要通过$compile服务来编译元素才能正常工作。

实现上述目标的另一种简单方法是使用某个范围变量绑定。

angular.module('textInputExample', [])
  .controller('ExampleController', ['$scope',
    function($scope) {
      $scope.example = {
        text: 'guest',
        word: /[a-z]/,
        changengpattern: function() {
          this.word = /[0-9]/;
        }
      };
    }
  ]);

<强> HTML

<form name="myForm" ng-controller="ExampleController">
    Single word:
    <input type="text" name="input" ng-model="example.text" ng-pattern="example.word" required ng-trim="false">
    <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
    Single word only!</span>

    <tt>text = {{example.text}}</tt>
    <br/>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt>
    <br/>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt>
    <br/>
    <tt>myForm.$valid = {{myForm.$valid}}</tt>
    <br/>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
    <br/>
    <input type="button" value="click me to change ng pattern" ng-click="example.changengpattern()" />
  </form>

Here正在为你工作

Answer 2

在我发现之前我遇到了同样的问题，角度需要你的正则表达式中的起始和字符串结束标记。您的示例将如下所示：

$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b$/");
$(".fld-updateinterval-val").attr("ng-pattern", "/^\\b([1-9][0-9]{0,2}|[1-7][0-9]{3}|8[0-6][0-9]{2}|87[0-5][0-9]|8760)\\b$/");

注意以/^开头并以$/结束的模式字符串。这解决了我自定义ng-patterns的问题。

Answer 3

ng-pattern =＆＃34; / ^（[0-9] [0-9] {0,2} | [1-7] [0-9] {3} | 8 [0-6] [0-9] {2} | 87 [0-5] [0-9] \ d | 8760）$ /＆＃34;

Answer 4

在ng模式内的输入中提供正则表达式("/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/")。

例如

ng-pattern="/\\b([1-9][0-9]?|[12][0-9]{2}|3[0-5][0-9]|36[0-5])\\b/"

对我有用。...

ng-pattern在AngularJS中不起作用

4 个答案: