Вот пример кода с фильтром, использующим динамически построенное регулярное выражение.
Элементы будут отфильтрованы по 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, чтобы применить фильтр на стороне сервера.