如何选择在ng标记输入自动完成中显示哪个字段

Question

来自文档：

<tags-input>
  <auto-complete
    source="{expression}"
  >
  </auto-complete>
</tags-input>

表达式的结果必须是最终解析为对象数组的promise。

$scope.loadSuperheroes = function(query) {
// An arrays of strings here will also be converted into an
// array of objects
return $http.get('superheroes.json');
};

但是我已经在$scope中有了一个对象数组。但有一个不同的结构：

$scope.superheroes = [{"id":1, "name":"Batman"}, {"id":2, "name":"Superman"}]

如何在html中说要使用$scope.supervisores.name中的列表？

Answer 1

您可以通过设置displayProperty属性来更改用于显示标记文本的属性：

<tags-input ng-model="tags" display-property="name"></tags-input>

autocomplete指令也将使用该属性来显示返回的建议。

Answer 2

如文档中所述：http://mbenford.github.io/ngTagsInput/gettingstarted

NgTagsInput可以对一系列基本项执行自动完成（几个月前我在GitHub上向该指令的创建者询问过它）。

所以我想你会有：

1. 要将对象数组重建为类似的东西：[{ text: 'Tag1' }, { text: 'Tag2' }, { text: 'Tag3' }]
2. 然后，必须使用$query作为loadSuperheroes（）方法的参数（因为$query是要键入的文本

因此，HTML:

<tags-input ng-model="filteredsuperheroes">
 <auto-complete
    source="loadSuperheroes($query)"
  >
  </auto-complete>
</tags-input>

然后，JS（Angular）部分：

$scope.filteredsuperheroes = [];
angular.forEach(superheroes, function(superhero) {
  var newEntry = {};
  newEntry['text'] = superhero.name;
  $scope.filteredsuperheroes.push(newEntry);
});
$scope.loadSuperheroes = function(query) {
   return $http.get('/filteredsuperheroes?query=' + query);
 };

提供一个实际的例子，这样我就可以测试了：）我不确定这是否有效，但你应该很容易理解我的意思：）

Answer 3

自动完成的源属性需要一个promise，所以如果你想使用一个已经存在的对象数组，你必须返回一个解析它的promise：

  $scope.superheroes = [{"id":1, "name":"Batman"}, {"id":2, "name":"Superman"}];
  $scope.loadTags = function(query) {
    var deferred = $q.defer();
    deferred.resolve($scope.superheroes);
    return deferred.promise;
  };

并且，由于您显示的属性名称不是text（tagsInput默认值），您需要通过将属性display property="name"添加到tags输入元素来指定它：

<tags-input ng-model="superheroesModel" display-property="name" add-on-paste="true">
      <auto-complete min-length="1" source="loadTags($query)"></auto-complete>
</tags-input>

我从ngTagsInput Demo页面派生了一个简单的自动完成示例，并进行了这些更改。请在此处查看这些更改。