Angularjs 使用验证规则过滤搜索文本输入

Question

现在，我有一个非常典型的过滤器使用示例：

...
Search: <input ng-model="searchText">
<table>
   <tr ng-repeat="friend in friends | filter:searchText">
       <td>{{friend}}</td>
   </tr>
</table>
...

在我将正则表达式规则添加到 input 标记之前，它一直运行良好，现在代码：

...
Search: <input ng-model="searchText" ng-pattern='/John|Mary|Mike|Adam/'>
<table>
   <tr ng-repeat="friend in friends | filter:searchText">
       <td>{{friend}}</td>
   </tr>
</table>
...

See this plunker

除非你通过验证规则，否则这个过滤器就会开始工作，似乎验证规则会阻止关键字传递给过滤器，直到关键字满足正则表达式规则，我期望的是验证只生效当 searchText 失去焦点时。

我现在正在使用一个非常丑陋的解决方法，它类似于 dynamic ng-pattern，我将表达式放入一个参数中，例如 $scope.regex=/John|Mary|Mike|Adam/，然后将 searchText 更改为 <input ng-model="searchText" ng-pattern='regex' ng-focus="regex=''" ng-blur="regex = /John...../">。

有更好的解决方案吗？

Answer 1

您应该查看 ng-model-options API，其中包含针对各种事件或延迟更新 ng-model 的选项。

ng-model-options="{ updateOn: 'blur' }"

Working Plunkr

Answer 2

Probably you're looking for this

示例（从官方网站复制）

以下示例说明如何覆盖立即更新。仅当控件失去焦点（模糊事件）时，表单内输入的更改才会更新模型。如果在输入字段获得焦点时按下退出键，该值将重置为当前模型中的值。

<div ng-controller="ExampleController">
  <form name="userForm">
    <label>Name:
      <input type="text" name="userName"
             ng-model="user.name"
             ng-model-options="{ updateOn: 'blur' }"
             ng-keyup="cancel($event)" />
    </label><br />
    <label>Other data:
      <input type="text" ng-model="user.data" />
    </label><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

Angularjs 使用验证规则过滤搜索文本输入

Angularjs Filter search text input with a validation rule

validation

angularjs

angularjs-filter