поиск по угловому выделенному фрагменту

Я использую AngularJS для поиска и создал специальный фильтр, чтобы выделить искомый текст внутри результатов.поиск по угловому выделенному фрагменту

Ниже мой фильтр (JS):

var myApp = angular.module('myApp', []).filter('highlight', function($sce) { 
    return function(query, phrase) { 
     if (phrase) query = query.replace(new RegExp('('+phrase+')', 'gi'), 
     '<span class="highlighted">$1</span>') 

     return $sce.trustAsHtml(query) 
    } 
});

И соответствующий HTML:

<input ng-model="query" ng-keyup="search()" type="text" data-ele="home_search" class="form-control" id="exampleInputAmount" placeholder=""> 
<div ng-if="item.search_type == 'playset'" ng-animate="'animate'" ng-repeat="item in artists | filter: query | highlight:query" class="block gry-block">

После добавления фильтра, ошибки будут появляться, и я не знаю, почему.

Любая помощь предоставляется.

Вы также можете проверить это поведение на this URL.

источник

2016-05-24 Ashish Joshi

Какие ошибки он показывает? – devqon

TypeError: Невозможно прочитать свойство «replace» of undefined. но вы можете посмотреть на консоль. –

<input id="searchText" type="search" placeholder="Search Asset..." ng-model="searchText" /> 
<div ng-repeat="singleItem in yourArray| filter : searchText">

источник

2016-05-24 11:19:59

Код, который вы предоставили, недостаточно для того, чтобы дать вам рабочий пример с кодом. Однако я предполагаю, что вы хотите выделить ключевое слово внутри элемента DOM. Затем посмотрите на mark.js, ключевое слово/поисковый запрос или пользовательское регулярное выражение highlighter.

Пример:

var markInstance = new Mark(document.querySelector(".context")); 
 
function highlight(){ 
 
    var searchTerm = document.querySelector("input").value; 
 
    markInstance.unmark().mark(searchTerm); 
 
}

mark{ 
 
    background: yellow; 
 
}

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script> 
 
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()"> 
 
<p class="context"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</p>

источник

2016-05-24 11:23:46 dude

Да, это может быть сделано с этим, но поскольку я хочу узнать, что с помощью углового –

@AshishJoshi вы можете, конечно, поместить его в контейнер функции AngularJS, например. директивы. – dude

okay позволяет попробовать ... –

Вы используете angular-sanatize.js файл возвращать стиль от контроллера?

Я написал решение, не относящееся к вашему ререйгу, к вашей проблеме. Не совсем ответ на ваш вопрос, но не стесняйтесь использовать этот Codepen Example.

Надеюсь, что это поможет :)

источник

2017-09-01 11:41:45 user3271319

* угловая дезинфекция – user3271319

поиск по угловому выделенному фрагменту

ответ

Смежные вопросы