Ng-Bind-Html 在 ng-repeat 中

Question

我正在制作一个自定义自动建议组件，我在其中使用搜索词点击网络服务，它 returns 我显示的建议列表。

我的问题是，我想将列表中的匹配项加粗，而 angular 与额外的 html 搭配起来效果不佳。我已经看到无数使用 ng-bind-html 的示例，如果我可以绑定到特定值，但不能绑定到动态值列表，我就可以开始工作了。

这是我的第一个 angular 项目，所以我确定我缺少一些简单的东西。我发布的代码正确呈现 html 但它只多次显示最后的结果（我明白为什么）。

我怎样才能完成我想做的事情？

这是我的翡翠代码：

#search-main(ng-controller="autocomplete" data-api-url="/autocomplete.json")
  input(type="search" placeholder="Search" ng-model="termToComplete")
  input(type="image" name="submit" src="/search-icon.gif", alt="Submit")
  ul.autoSuggest(ng-if="items.length")
    li.fade-in(ng-repeat="item in items")
      h2: a(href="{{item.url}}" ng-bind-html="html")

这是我的一些js

app.filter('html', ['$sce', function ($sce) { 
  return function (text) {
    return $sce.trustAsHtml(text);
  };    
}])

app.controller('autocomplete', function($scope, $element, $timeout, acAPIservice, $location, $sce){
  $scope.items = [];
  $scope.apiUrl = $element.attr('data-api-url');
  $scope.termToComplete = undefined;

  $scope.showSuggestion = function(){
  var payload = {
    term : $scope.termToComplete
  }

  acAPIservice.getSearch($scope.apiUrl, payload)
    .success(function(data){
      $scope.items = $scope.items.concat(data.results);
      $scope.findMatch();

   })
    .error(function(data, status, headers, config){      
      $scope.items = [];
   });
  }

  //iterates over the results and bolds matching terms
  $scope.findMatch = function(){
    var term = $scope.termToComplete;
    angular.forEach($scope.items, function(value, key){
    $scope.items[key].title = $sce.trustAsHtml($scope.items[key].title.replace(new RegExp('(^|)(' + term + ')(|$)','ig'), '<b></b>'));
    $scope.html = $scope.items[key].title;
      });
   }


  $scope.$watch('termToComplete', function(newValue, oldValue) {
    // reset everything
    $scope.items = [];
    $scope.start = 0;
    $scope.end = 0;
    $scope.total = 0;
    // if we still have a search term go get it
    if($scope.termToComplete){
      $scope.showSuggestion();
    }
  });
});

这是我的测试-Json :

{
    "start" : 1,
    "end" : 8,
    "total" : 27,
    "results" : [{
        "id" : 0,
        "title" : "here is a title",
        "url" : "google.com"
    }, {
        "id" : 1,
        "title" : "here is another title",
        "url" : "google.com"
    }, {
        "id" : 2,
        "title" : "and another title",
        "url" : "google.com"
    }]
}

注意：

acAPIservice 只是一个点击 API 和 returns 数据的工厂

Answer 1

您不需要定义 $scope.html，因为您已经将 HTML 分配给 title。

您只需在 ng-repeat 循环中正确使用它：

li.fade-in(ng-repeat="item in items")
  h2: a(ng-href="{{item.url}}" ng-bind-html="item.title")

我还建议使用 ng-href 而不仅仅是 href，因为您正在为 link 使用 angular 表达式 ;)

Ng-Bind-Html 在 ng-repeat 中

Ng-Bind-Html inside ng-repeat

javascript

html

angularjs

filter

ng-bind-html

这是我的翡翠代码：

这是我的一些js

这是我的测试-Json :

注意：