吴-BIND-HTML中NG-重复 [英] Ng-Bind-Html inside ng-repeat

问题描述

我在做一个自定义的自动提示组件，我打一个Web服务与搜索词，返回的我显示建议列表。

I'm making a custom autosuggest component where I hit a web service with a search term and it returns a list of suggestions which I display.

我的问题是，我想大胆列表内的匹配项和角度是不打漂亮的额外HTML。我见过用NG-绑定HTML的，我已经得到了工作，如果我可以绑定到特定的值，而与价值观的动态列表无数和无数的例子。

My issue is, I want to bold the matching term inside the list and angular is not playing nice with the extra html. I've seen countless and countless examples using ng-bind-html which I've gotten to work if I can bind to specific values, but not with a dynamic list of values.

这是我的第一个角的项目，所以我敢肯定有一些简单的我失踪。在code我张贴正确地呈现HTML，但只显示最后的结果多次（我理解）。

This is my first angular project so I'm sure there is something simple I'm missing. The code I'm posting renders the html correctly but it only displays the last result multiple times (I understand why).

我怎么能做到什么，我试图做？

How can I accomplish what I'm trying to do?

#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'), '$1<b>$2</b>$3'));
    $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并返回数据

---

NOTE:

acAPIservice is just a factory that hits an API and returns the data

推荐答案

您不需要定义 $ scope.html ，因为你已经分配的HTML 标题。

You don't need to define $scope.html because you are already assigning the HTML to title.

您只需要使用它的权利在你的 NG-重复循环：

You just need to use it right in your ng-repeat loop:

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

---

我也推荐使用 NG-HREF ，而不是仅仅的href ，因为你使用的是棱角分明的前pression的链接;）

---

I also recommend using ng-href instead of just href, because you are using an angular expression for the link ;)

这篇关于吴-BIND-HTML中NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！