regex и angular для форматирования слов, соответствующих запросу

Question

regex и angular для форматирования слов, соответствующих запросу

0

Я сохранил входное текстовое значение в переменной с именем id = search-query. И затем я просматриваю данные JSON, чтобы найти какой-либо соответствующий результат, а затем выводить результат на экран. Есть ли способ, которым я могу выделить слово, соответствующее запросу query-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;
      } 
  });   
}

user21 02 сен. 2016, в 07:32

Источник

0

Вы можете попробовать это {{result.name}} . ng-bind-html свяжет строку html с элементом span.
Ananth Pai 02 сен. 2016, в 04:56
0

спасибо, но это не работает. Он выводит тег формата в виде текста в html. Пояснение: "Нойбергер Берм a n"
user21 02 сен. 2016, в 05:07

Теги:

scope

angularjs

regex

replace

ng-bind-html

1 ответ

Ещё вопросы

Вы можете попробовать это {{result.name}} . ng-bind-html свяжет строку html с элементом span.
спасибо, но это не работает. Он выводит тег формата в виде текста в html. Пояснение: "Нойбергер Берм a n"

o4ohel · Accepted Answer · 2016-09-02T04-53-00.000Z

Один из подходов - использовать фильтр в сочетании с ng-bind-html. Фильтр в моем примере plnkr копируется непосредственно из кода директивы type-head углового бутстрапа, поэтому я не беру на себя ответственность за это :) Но другая часть этого заключается в использовании ng-модели для поискового запроса, а не поиске ее, используя JQuery. Надеюсь это поможет.

Разметка:

<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>

JavaScript:

    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;
  };
});