如何在角度过滤器中添加regEx

卡比尔·里法耶

例如:plunker

从上面的示例中,我使用angular创建了一个带有过滤器选项的简单表单。

就过滤器而言,它是由angular提供的默认过滤器。当前,当我搜索文本“ br”时,它显示ID 1和10。

我想在搜索输入中添加regEx。可以使用进行搜索regEx

我需要的是,搜索项可以是

  • “ br” =>它显示两个数据,
  • “ b *” =>显示所有以b开头的数据。
  • “ *” =>所有数据
  • “ * br” =>所有数据均以br结尾。

上面的搜索应根据搜索输入显示相关数据。

scripts.js

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

app.controller('regEx', function($scope, $http) {
  $scope.init = function() {
    $http.get('https://jsonplaceholder.typicode.com/users/').success(function(data) {
      $scope.data = data;
      console.log(data);
    }).error(function(e) {
      console.log(e);
    });
  }

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="regEx" class="container">
    <h1>RegEx in Angular search</h1>
    <input type="text" class="form-control" ng-model="search" autofocus>
    <br />
    <table ng-init="init()" class="table table-bordered animated fadeIn">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Phone Number</th>
          <th>username</th>
          <th>website</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="d in data | filter:search">
          <td>{{d.id}}</td>
          <td>{{d.name}}</td>
          <td>{{d.phone}}</td> 
          <td>{{d.username}}</td>
          <td>{{d.website}}</td>
        </tr>
        <tr ng-if="d.length < 1">
          <td colspan="5" class="text-center">No Router Found</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
西斯纳

在这种情况下,我可能会创建一个自定义过滤器。

这里最棘手的部分是您的对象模型不是平坦的,因此我们必须进行深入遍历以检查字段。这种方法的警告是,您可能会检查不可见的字段(尽管我相信这是默认角度滤镜的行为)。

如果这是一个问题,则可以调整过滤器以传递要检查的字段列表,并使用这些过滤器过滤掉不需要的字段。

这是过滤器:

app.filter('wildcard', function() {

  return function(list, value) {

    if (!value) {
      return list;
    }

    var escaped = value.replace(/([.+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    var formatted = escaped.replace('*', '.*')

    if (formatted.indexOf('*') === -1) {
      formatted = '.*' + formatted + '.*'
    }

    var output = []

    angular.forEach(list, function(item) {
      var regex = new RegExp('^' + formatted + '$', 'im');
      if (traverse(item, regex)) {
        output.push(item);
      }
    });

    return output
  }

  function traverse(item, regex) {
    for (var prop in item) {

      //angular property like hash
      if(prop[0] === '$$'){
        return;  
      }

      var value = item[prop];

      if (typeof value === 'object') {
        traverse(value, regex);
      }

      if(regex.test(value)){
        return true;
      }
    }
  }
})

然后在你html:

 <tr ng-repeat="d in data | wildcard:search">

这是the子

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在角度过滤器中使用变量

来自分类Dev

如何在角度过滤器中使用变量

来自分类Dev

AngularJs 中的角度过滤器

来自分类Dev

如何在角度过滤器中将HTML5音频/视频作为输出返回

来自分类Dev

AngularJS:如何在角度过滤器中用换行符<br>替换

来自分类Dev

在角度过滤器中检查相等性

来自分类Dev

角度过滤器对象中的空数组

来自分类Dev

使角度过滤器成为条件

来自分类Dev

角度过滤器返回html

来自分类Dev

子属性的角度过滤器

来自分类Dev

角度过滤器+打字稿

来自分类Dev

多个角度过滤器

来自分类Dev

角度过滤器返回html

来自分类Dev

子属性的角度过滤器

来自分类Dev

角度过滤器问题

来自分类Dev

角度过滤器完全匹配

来自分类Dev

如何在Google表格中的“ =过滤器”中添加“或”

来自分类Dev

角度过滤器:如何进行预过滤,以便角度过滤器仅考虑整个数据对象的一部分

来自分类Dev

基于角度变量的角度过滤器

来自分类Dev

带开关的角度过滤器列表(角度材料)?

来自分类Dev

如何在ffmpeg中添加多个过滤器?

来自分类Dev

如何在Redis中添加条件(过滤器)

来自分类Dev

如何在 Maya 中添加事件过滤器

来自分类Dev

角度过滤器-过滤产品和类别

来自分类Dev

角度过滤器在过滤时会删除HTML

来自分类Dev

如何使用对象并用作角度过滤器的谓词

来自分类Dev

具有深层物体的ng-repeat中的角度过滤器

来自分类Dev

标签冲突中的ui-bootstrap角度过滤器

来自分类Dev

用于HTML格式的角度过滤器