¿Как сделать комбинацию фильтров Angularjs? - PullRequest
0 голосов
/ 30 марта 2020

У меня есть этот фрагмент объекта:

[{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>


Какой правильный способ сделать этот фильтр?

1 Ответ

0 голосов
/ 31 марта 2020

Вот пример кода с фильтром, использующим динамически построенное регулярное выражение.

Элементы будут отфильтрованы по titulo. Слова в фильтре запросов должны содержать как минимум 3 буквы или будут игнорироваться.

Чтобы появиться, свойство titulo должно содержать одно из слов, разделенных |.

(?<=^|\s)(Colectivo|GMM|Cotizador...)

(?<=^|\s) означает, что слову предшествует либо начало строки запроса, либо пробел.

Слова не чувствительны к регистру, поскольку мы используем модификатор шаблона регулярного выражения gi, где i означает без учета регистра .

Играть с регулярным выражением на регулярном выражении 101

Пример кода

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",
          },
        ];
      },
    };
  });
<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>

Вы также можете извлечь код в специальный фильтр, который получит 2 параметра, коллекцию элементов и фильтр запросов.

.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 в качестве параметра.

<div ng-repeat="item in items | itemsFilter:queryFilter">
    {{item.titulo}}
</div>

Проверьте это демо на JSFiddle

Предупреждение

В обоих случаях фильтр кода выполняется на сторона клиента. Если у вас много элементов, не делайте этого и передайте фильтр запросов в ваш API, чтобы применить фильтр на стороне сервера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...