如何选择在ng-tags-input autocomplete中显示哪个字段？

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.superheroes.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上向该指令的创建者询问过它)。

所以我认为你会有：

要将对象数组重新构造为类似以下内容的参数：[{ text: 'Tag1' }, { text: 'Tag2' }, { text: 'Tag3' }]

• Then，

• 您必须使用$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

autocomplete的源属性需要一个 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;
  };

而且，由于您显示的属性名称不是文本输入元素(默认为tagsInput)，您需要通过将属性display-property="name"添加到tags-input元素来指定它：

<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 Page派生了一个简单的自动补全示例，并进行了以下更改。请查看这些更改here。