Angular 万能的自动完成功能答案

【问题标题】：Angular almighty autocompleteAngular 万能的自动完成功能
【发布时间】：2017-05-19 11:32:54
【问题描述】：

我正在尝试更改 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] http://errors.angularjs.org/1.2.12/$sce/itype?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) {

我本想在此处粘贴更多代码，但编辑器对我耍了花招。这是我的第一个问题，我将不得不把它留在那里。

请点击顶部的链接获取完整的代码示例，看看您是否可以帮助我

【问题讨论】：

解决这个问题好运吗？

标签： angularjs search autocomplete module directive

【解决方案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

【讨论】：

【解决方案2】：

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

改变这一行：

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

到那个：

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

它应该可以工作。

【讨论】：

【解决方案3】：

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

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

【讨论】：