Angular全能自动补全

Question

我正在尝试修改almighty autocomplete以接受对象数组，而不仅仅是字符串数组。但令人遗憾的是，我停滞不前。

在这里，我希望一个数组包含对象，而不是app.js中的字符串

MovieRetriever.getmovies = function(i) {
var moviedata = $q.defer();
var movies;

var moreMovies = [{id: "0", name: "someMovie"}, {id: "1", name: "anotherMovie"}, {id: "2", name: "aMovie"}];

// var moreMovies = ["The Wolverine", "The Smurfs 2", "The Mortal Instruments: City of Bones"]

if(i && i.indexOf('T')!=-1)
  movies=moreMovies;
else
  movies=moreMovies;

$timeout(function(){
  moviedata.resolve(movies);
},1000);

return moviedata.promise

但当我这样做时，我会受到如下错误的惩罚

错误：$sce:itype$sce/i类型?p0=html

我怀疑它起源于autocomplete.js的这个区域

template: '\
    <div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">\
      <input\
        type="text"\
        ng-model="searchParam"\
        placeholder="{{ attrs.placeholder }}"\
        class="{{ attrs.inputclass }}"\
        id="{{ attrs.inputid }}"/>\
      <ul ng-show="completing">\
        <li\
          suggestion\
          ng-repeat="suggestion in suggestions | filter:searchFilter | orderBy:\'toString()\' track by $index"\
          index="{{ $index }}"\
          val="{{ suggestion }}"\
          ng-class="{ active: ($index === selectedIndex) }"\
          ng-click="select(suggestion)"\
          ng-bind-html="suggestion | highlight:searchParam"></li>\
      </ul>\
    </div>'

还有这里

app.filter('highlight', ['$sce', function ($sce) {

我本想在这里粘贴更多的代码，但是编辑器对我开了个玩笑。这是我的第一个问题，我不得不把它留在那里。

请按照顶部的链接查看完整的代码示例，看看是否可以帮助我

Answer 1

只有一个问题:为什么不使用http://angular-ui.github.io/bootstrap/#/typeahead

<h4>Custom templates for results</h4>
<pre>Model: {{customSelected | json}}</pre>
<input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">

我认为这对你来说更干净/更容易。http://plnkr.co/edit/?p=preview

Answer 2

你是对的，你必须稍微改变一下模板。

更改此行：

ng-bind-html="suggestion | highlight:searchParam"></li>\

关于这个问题：

ng-bind-html="suggestion.name | highlight:searchParam"></li>\

它应该是有效的。

Answer 3

尝试在您的模块includes中包含ngSanitize。

angular.module("myApp", ["ngSanitize"])