2

来自文档：

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

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

$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 中的列表？

4

3 回答 3

4

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

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

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

于 2014-11-07T19:40:39.710 回答
1

如文档中所述：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);
 };

提供一个活生生的例子，所以我可以测试一下：）我不确定这是否可行，但你应该很容易理解我的意思：）

于 2014-11-06T13:20:05.680 回答
1

自动完成的source 属性需要一个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分叉了一个简单的自动完成示例并进行了这些更改。在此处查看这些更改。

于 2015-12-08T21:32:10.137 回答