AngularJS подсветка поиска нет результата - PullRequest
Новая
       37

AngularJS подсветка поиска нет результата

0 голосов
/ 03 октября 2018

Я использую поиск ярких углов AngularJS из https://codeforgeek.com/2014/12/highlight-search-result-angular-filter/

Проблема в том, что, если я ищу ключевое слово, эффект подсветки работает отлично.Но как только я ввожу ключевое слово, которого нет в контенте, оно скрывает весь контент.См. Рисунки ниже:

Выделенное ключевое слово: Highlighted Keyword

Неверное ключевое слово - содержание не отображается: iincorrect keyword - no content shown

Здесь мой JS 

var newsApp = angular.module("NewsApp",[]);
newsApp.controller("newsCtrl",function($scope){
$scope.posts = [

    {
    "id"        : "1",
    "title"     : "CMS Newsletter - 2018-01-02",
    "content"   : ""TEST CONTENT - ORIGINAL CONTENT IS CONFIDENTIAL",
    },

];
});

newsApp.filter('unsafe', function($sce) { 
return function(val) { 
    return $sce.trustAsHtml(val);
}; 
}); 

newsApp.filter('highlight', function($sce) {
 return function(text, phrase) {
   if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
     '<span style="background: red;">$1</span>')

 return $sce.trustAsHtml(text)
 }

Вот мой HTML 

     <div class="newsletter-control-bar-left">
                <input type="text" ng-model="search.text" placeholder="Search for Keywords" />
 </div>
    <div style="margin-top: 50px;">
        <div class="newsletter-archive">
            <ul class="nav nav-pills nav-stacked col-md-3 newsletter-side">
                <li ng-repeat="post in posts"><a href="#{{post.id}}" data-toggle="tab">{{post.title}}</a></li>
            </ul>

            <div class="tab-content col-md-9">
                <div class="tab-pane active" id="#">Navigate through the the Newsletter Archive!</div>
                <div class="tab-pane" id="{{post.id}}" ng-repeat="post in posts | filter:search.text">

                <div>
                    <p id="search_para" ng-bind-html="post.content | highlight:search.text">
                    </p>
                </div>
            </div>
        </div>
     </div>

Кто-нибудь знает, как реализовать, может быть, еще аргумент, если ключевое слово не найдено, чтобы оно ничего не выдвигало на первый план вместо того, чтобы скрывать весь контент?

1 Ответ

0 голосов
/ 03 октября 2018

Вы можете поместить свой второй div в ng-if и сказать, например, ng-if=" $ctrl.search.text.found() === false".Вам нужно будет создать функцию в вашем контроллере как:

let found = () => search.text.match('input.ref', 'words[].ref') ? true : false

Так что вместо этого будет отображаться другой контент, чтобы скрыть все.

Это слишком универсально, но надеюсь, что этопомогает:)

...