Question

我有这个片段对象：

[{id: 721, titulo: "Cotizador Gastos Médicos Bx+ 2019", descripcion: "Cotizador Gastos Médicos Bx+ Tarifas 2019", updateDate: "2020-03-25 14:30:22.0", idCategoria: "1", …},
{id: 88, titulo: "Cotizador GMM Colectivo", descripcion: "Cotizador GMM Colectivo", updateDate: "2020-03-25 14:27:43.0", idCategoria: "1", …},
{id: 302, titulo: "Cotizador AP Escolar", descripcion: "Cotizador Accidentes Personales Escolar", updateDate: "2020-03-25 14:26:48.0", idCategoria: "1", …},
{id: 865, titulo: "Cotizador Únikuz Bx+", descripcion: "Cotizador Únikuz Bx+", updateDate: "2020-03-19 13:14:01.0", idCategoria: "1", …},
{id: 381, titulo: "Cotizador Premia Bx+", descripcion: "Cotizador Premia Bx+", updateDate: "2020-01-02 12:27:43.0", idCategoria: "1", …},
{id: 89, titulo: "Cotizador Vida Grupo", descripcion: "Cotizador Vida Grupo", updateDate: "2019-12-26 17:20:00.0", idCategoria: "1", …}]

效果很好，因为它会搜索我的元素（如果我搜索“ GMM COLECTIVO”结果就可以了）：

GMM COLECTIVO

但是，如果我尝试搜索“ COLECTIVO GMM”，则找不到：

COLECTIVO GMM

我正在使用此JS代码：

getData: function () {
            return $filter('filter')(this.data, this.filter);
        },

我的观点：

<div>
    <input class="input-buscar" id="pagFormatosfilter" type="text"
        ng-model="pagFormatos.filter" min="3"
        placeholder="Escriba texto a buscar"
        ng-change="pagFormatos.onUpdateFilter()"><br>
    <div ng-cloak
        style="text-align: right; font-size: larger; font-weight: bold;">
        <label>{{pagFormatos.label1()}}</label> <br>
    </div>

</div>

执行此过滤器的正确方法是什么？

Answer 1

这是带有使用动态构建的正则表达式的过滤器的示例代码。

项目将被then()过滤。查询过滤器中的单词必须至少包含3个字母，否则将被忽略。

要显示，titulo属性必须包含由titulo分隔的单词之一。

(?<=^|\s)(Colectivo|GMM|Cotizador...)表示单词以查询字符串开头或空格开头。

单词不区分大小写，因为我们使用了正则表达式模式修饰符(?<=^|\s)，其中gi表示不区分大小写。

Play with the regex on regex101

示例代码

angular.module("myApp", []);
angular
  .module("myApp")
  .controller("itemsController", [
    "$scope",
    "itemsService",
    function ($scope, itemsService) {
      $scope.items = itemsService.getItems();
      $scope.itemsFilter = function (item) {
        if ($scope.queryFilter && $scope.queryFilter.length) {
          var words = $scope.queryFilter.split(" ").filter(function (word) {
            return word.length >= 3; // Ignore words with less than 3 letters
          });
          var pattern = "(?<=^|\\s)(" + words.join("|") + ")";
          var re = new RegExp(pattern, "gi");
          return re.test(item.titulo);
        }
        return true;
      };
    },
  ])
  .service("itemsService", function () {
    return {
      getItems: function () {
        return [
          {
            id: 721,
            titulo: "Cotizador Gastos Médicos Bx+ 2019",
            descripcion: "Cotizador Gastos Médicos Bx+ Tarifas 2019",
            updateDate: "2020-03-25 14:30:22.0",
            idCategoria: "1",
          },
          {
            id: 88,
            titulo: "Cotizador GMM Colectivo",
            descripcion: "Cotizador GMM Colectivo",
            updateDate: "2020-03-25 14:27:43.0",
            idCategoria: "1",
          },
          {
            id: 302,
            titulo: "Cotizador AP Escolar",
            descripcion: "Cotizador Accidentes Personales Escolar",
            updateDate: "2020-03-25 14:26:48.0",
            idCategoria: "1",
          },
          {
            id: 865,
            titulo: "Cotizador Únikuz Bx+",
            descripcion: "Cotizador Únikuz Bx+",
            updateDate: "2020-03-19 13:14:01.0",
            idCategoria: "1",
          },
          {
            id: 381,
            titulo: "Cotizador Premia Bx+",
            descripcion: "Cotizador Premia Bx+",
            updateDate: "2020-01-02 12:27:43.0",
            idCategoria: "1",
          },
          {
            id: 89,
            titulo: "Cotizador Vida Grupo",
            descripcion: "Cotizador Vida Grupo",
            updateDate: "2019-12-26 17:20:00.0",
            idCategoria: "1",
          },
        ];
      },
    };
  });

您还可以将代码提取到专用的过滤器中，该过滤器将接收2个参数，项目集合和查询过滤器。

<html ng-app="myApp">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body>
<div ng-controller="itemsController">
  <input type="text" ng-model="queryFilter">
  <div ng-repeat="item in items | filter:itemsFilter">
      {{item.titulo}}
  </div>
</div>
</body>
</html>

不要忘记将.filter("itemsFilter", function () { return function (items, queryFilter) { return items.filter(function (item) { if (queryFilter && queryFilter.length) { var words = queryFilter.split(" ").filter(function (word) { return word.length >= 3; // Ignore words with less than 3 letters }); var pattern = "(?<=^|\\s)(" + words.join("|") + ")"; var re = new RegExp(pattern, "gi"); return re.test(item.titulo); } return true; }); }; })作为参数传递。

queryFilter

在JSFiddle上查看this demo

警告

在两种情况下，代码过滤器都是在客户端执行的。如果您有很多物品，请不要执行此操作，并将查询过滤器传递给您的api，以便在服务器端应用过滤器。

¿如何做Angularjs过滤器组合？

1 个答案: