regex und angular, um Wörter zu formatieren, die der Abfrage entsprechen

Ich habe Eingabe Textwert in eine Variable mit ID-Name = Suchabfrage gespeichert. Und dann durchsuche ich die JSON-Daten, um ein passendes Ergebnis zu finden, und gebe das Ergebnis dann auf dem Bildschirm aus. Gibt es einen Weg, wie ich das Wort, das mit der Suchabfrage übereinstimmen kann, fett machen kann? Ich habe versucht, stattdessen ng-bind-html zu verwenden, aber es gibt die Ergebnisse nicht aus.regex und angular, um Wörter zu formatieren, die der Abfrage entsprechen

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

Quelle

2016-09-02 user21

Sie dieses 'versuchen {{}} result.name'. 'ng-bind-html' bindet die html-Zeichenfolge an das span-Element. –

danke, aber es funktioniert nicht. Es gibt das Format-Tag als Text im HTML-Format aus. Exp: "Neuberger Berm a n" – user21

Ein Ansatz ist es, einen Filter in Kombination mit ng-bind-HTML zu verwenden. Der Filter in meinem plnkr example wird direkt aus dem angular bootstrap typeahead directional Code kopiert, also nehme ich das nicht an :) Aber der andere Teil davon ist, ng-model für den Suchbegriff zu verwenden, anstatt ihn mit jquery zu suchen . Hoffe, das hilft.

Markup:

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

Quelle

2016-09-02 06:09:28 o4ohel

regex und angular, um Wörter zu formatieren, die der Abfrage entsprechen

Antwort

Verwandte Themen