CODEWITHSUNDEEP
javascriptangularjsng-tags-input
Lagoda Denis
Lagoda Denis

Reputation: 235

How to choose which field to display in ng-tags-input autocomplete?

from documentation:

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

The result of the expression must be a promise that eventually resolves to an array of objects. 

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

But I have already have an array of objects in $scope. But with a different structure:

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

How to say in html to use list from $scope.superheroes.name ?

Upvotes: 2

Views: 8767

Answers (3)

Arthur Silva
Arthur Silva

Reputation: 878

The autocomplete's source attribute needs a promise, so if you want to use an already existing array of objects you'll have to return a promise that resolves to it:

  $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;
  };

and, as your displayed property name is not text (default by tagsInput), you need to specify it by adding the attribute display-property="name" to 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>

I forked a simple autocomplete example from ngTagsInput Demo Page and made these changes. Check it out these changes here.

Upvotes: 1

Michael Benford
Michael Benford

Reputation: 14104

You can change the property used to display the tag text by setting the displayProperty property:

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

That property will also be used by the autocomplete directive to display the returned suggestions.

Upvotes: 4

enguerranws
enguerranws

Reputation: 8233

As described in the docs : http://mbenford.github.io/ngTagsInput/gettingstarted

NgTagsInput can perform autocomplete on an array of basic items (I asked it on GitHub to the creator of that directive months ago).

So I'll think you will have :

  1. to reconstruct your array of objects to something like this : [{ text: 'Tag1' }, { text: 'Tag2' }, { text: 'Tag3' }]
  2. Then, you must use the $query as parameter of your loadSuperheroes() method (as $query is the text that is being typed.

So, the HTML :

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

Then, the JS (Angular) part :

$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);
 };

Provide a live example, so I'll could test this :) I'm not sure that will work, but you should easily understand what I mean :)

Upvotes: 1

Related Questions