AngularJS를 사용하는 용어 목록 강조 표시

각 요약 및 해당 요약에서 강조 표시 할 용어 목록이있는 검색 결과 목록이 있습니다 (단, 각 요약에는 강조 표시 용어가 있으므로 다른 용어의 영향을받지 않아야 함) .AngularJS를 사용하는 용어 목록 강조 표시

나는 angularjs에 익숙하지 않으며이 문제를 해결하는 데 어려움이 있습니다. 이것은 강조 표시가없는 현재 HTML입니다. 그래서 이상적으로 첫 번째 결과는 노란색 강조 '텍스트'와 '요약'을 표시 할

searchResult: { 
    "HighlightTerms": [ "text", "summary" ], 
    "Summary": "this is a text summary" 
    "Title": "my title" 
}

<ul ng-if="searchResults.length > 0"> 
    <li ng-repeat="searchResult in searchResults"> 
     <h2>{{ searchResult.Title }} </h2>  
     <p>{{ searchResult.Summary }}</p> 
    </li> 
</ul>

이는의 SearchResult 개체의 데이터 중 하나가 어떻게 생겼는지의 예입니다.

가장 좋은 방법은 무엇입니까? ng-bind-html을 사용해 보았지만 작동하지 못했습니다.

다음은 HighlightTerm - 'sensor'가있는 경우 어떻게 표시되어야하는지 예입니다.

example

출처

2014-02-26 nd2010

건가요? –

"HighlightTerms": [ "text", "summary"], 헤더를 의미합니까, 그렇다면 백 색으로 변경 하시겠습니까? –

Thanks Eugene, 각 li은 searchResult를 나타내며 해당 searchResult에 대한 특정 HighlightTerms가 강조 표시됩니다. 그래서 그들은 모두 다른 하이라이트를 가질 수 있습니다. – nd2010

당신은 각 ui-utilshighlight 기능을 후반 답변 죄송합니다

http://angular-ui.github.io/ui-utils/#/highlight

<label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label> 
<input placeholder="Enter some text to highlight" value="you" ng-model="highlightText"> 
<p ng-bind-html-unsafe="'Hello there, how are you today? I\'m fine thank you.' | highlight:highlightText:caseSensitive"></p> 

<style> 
.ui-match { background: yellow; } 
</style>

출처

2014-02-26 12:05:18

고마워요, 나는 이미 이것을 보았습니다. 그리고 그 중 하나의 강조점을 다루지 않았기 때문에 그것들을 배열하지 않아서 작동시킬 수 없었습니다. – nd2010

을 확인할 수 있지만 다른 사람을 도울 수 있습니다.

당신은 UI-utils를 기반으로 당신에게 자신의 지시를 만들 수 있습니다 MODULE_NAME은 모듈의 이름입니다

/** 
* Highlight words 
*/ 
angular.module('MODULE_NAME') 
    .filter('highlightWords', function() { 
     return function (text, search) { 
     if (text && (search || angular.isNumber(search))) { 
      text = text.toString(); 
      search = search.toString(); 

      angular.forEach(search.split(/\s+/), function(word) { 
      // reject some words from the filtering 
      if (['span', 'class', 'ui-match'].indexOf(word) < 0) { 

       var pattern = new RegExp("\\b" + word + "\\b", "gi"); 
       text = text.replace(pattern, '<span class="ui-match">$&</span>'); 
      } 
      }); 
     } 
     return text; 
     }; 
});

합니다.

사용 예 : UL은 강조에 먼저 리튬 요소가 필요 : 나는 corret

<p ng-bind-html="mymodel.text | highlightWords:searchTerms"></p>

출처

2014-12-03 14:53:43 user1921070

AngularJS를 사용하는 용어 목록 강조 표시

답변

관련 문제