검색어와 일치하는 단어를 정규식과 각도로 변환

id name = search-query 인 변수에 입력 텍스트 값을 저장했습니다. 그런 다음 JSON 데이터를 검색하여 일치하는 결과를 찾은 다음 결과를 화면에 출력합니다. search-query.val과 일치하는 단어를 대담하게 표현할 수있는 방법이 있습니까? 대신 ng-bind-html을 사용하려고했지만 결과를 출력하지 않습니다. 검색어와 일치하는 단어를 정규식과 각도로 변환

<body ng-app="products" ng-controller="ctrl"> 

<input type="text" id="search-query" name="query" placeholder="Enter product name"></input> 
<tbody> 
    <tr ng-repeat="result in searchResult|orderBy:order:reverse" > 
     <td > 
      <a ng-href="{{result.link}}" target="_blank"> 
       //used ng-bind-html or ng-bind, but does not works 
       <span ng-bind-html="result.name" target="_blank"></span> 
      </a> 
     </td> 
     <td ng-bind="result.type"></td> 
    </tr> 
</tbody>

var app2 = angular.module('products', []); 
app2.controller('ctrl', function($scope) { 
$scope.searchResult = []; 
$scope.submit = function(){ 
    var search = $("#search-query").val(); 
    $.each(json.products, function(i, v) { 
     var regex = new RegExp(search, "i"); 

     if (v.name.search(regex) != -1) { 

      // For the following line, is there a way which I can bold the word which match the search-query.val? 
      var name = v.name.replace(search, "<b>search</b>"); // doesn't work 

      $scope.searchResult.push({ name:name, type: v.type, link: v.url }); 
      return; 
     } 
    }); 
}

출처

2016-09-02 user21

<스팬 대상 = "_ 빈"> {{result.name}}'. 'ng-bind-html'은 html 문자열을 span 요소에 바인드합니다. –

감사하지만 작동하지 않습니다. 형식 태그를 html의 텍스트로 출력합니다. 경험 : "Neuberger Berm a n" – user21

하나의 접근법은 NG-편철 HTML과 조합하여 필터를 사용하는 것이다. 내 plnkr example의 필터는 angular bootstrap typeahead 지시문 코드에서 직접 복사되므로이 점을 인정하지는 않습니다 :) 하지만이 부분의 다른 부분은 jquery를 사용하여 검색하는 대신 검색어에 ng-model을 사용하는 것입니다 . 희망이 도움이됩니다.

마크 업 :

<input type="text" ng-model="search.name"> 
<ul> 
    <li ng-repeat="item in items | filter: search.name"> 
    <span ng-bind-html="item | highlight:search.name"></span> 
    </li> 
</ul>

자바 스크립트 :이`시도 할 수

var app = angular.module('plunker', ['ngSanitize']); 

app.controller('MainCtrl', function($scope) { 
    $scope.search = { 
    name: '' 
    }; 

    $scope.items = ['Jane','John','Sam','Jennifer','Martha']; 
}); 

app.filter('highlight', function($sce, $injector, $log) { 
    var isSanitizePresent; 
    isSanitizePresent = $injector.has('$sanitize'); 

    function escapeRegexp(queryToEscape) { 
    // Regex: capture the whole query string and replace it with the string that will be used to match 
    // the results, for example if the capture is "a" the result will be \a 
    return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); 
    } 

    function containsHtml(matchItem) { 
    return /<.*>/g.test(matchItem); 
    } 

    return function(matchItem, query) { 
    if (!isSanitizePresent && containsHtml(matchItem)) { 
     $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger 
    } 
    matchItem = query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag 
    if (!isSanitizePresent) { 
     matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive 
    } 
    return matchItem; 
    }; 
});

출처

2016-09-02 06:09:28 o4ohel

검색어와 일치하는 단어를 정규식과 각도로 변환

답변

관련 문제