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' }]
然后，必须使用$ 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

自动填充的来源属性需要承诺，因此如果您想使用现有的对象数组，则必须返回一个解析它的承诺：

  $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 element：

<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。

如何选择在ng-tags-input自动完成中显示哪个字段？

3 个答案: