CODEWITHSUNDEEP
javascriptangularjsng-tags-input
Atlas91
Atlas91

Reputation: 5904

ng-tags-input not able to choose an option from autocomplete

I've got some issue in this directive; the first one is that i can't see any item in the list.. Then sometimes it says that ngRepeat has duplicate values and then even if i'm able to see something i can't select it and put it on the input! How is possible? Here's a plunker

http://plnkr.co/edit/vTwOqcN4pm3FgKLYlLu9?p=preview

By the way, this is the html code part:

<body ng-controller="MainCtrl">
    <tags-input ng-model="tags"add-from-autocomplete-only="true">
      <auto-complete min-length="1"
                    source="loadTags($query)"
                    template="my-custom-template"></auto-complete>
    </tags-input>
    <p>Model: {{tags}}</p>

     <script type="text/ng-template" id="my-custom-template">
        <div class="right-panel>
            <span ng-bind-html="$highlight($getDisplayText())"></span>
            <h1 style="font-size: 15px!important" class="uk-margin-remove">
                {{data.name}}
            </h1>
        </div>
    </script>

  </body>

And here the angular:

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];


  $scope.loadTags = function(query) {

            return $http.get('tags.json', {
                cache: true
            }).then(function(data) {
                $scope.names = data.data.data;

                return $scope.names;
            });
        };

});

Upvotes: 0

Views: 2713

Answers (3)

jitendra varshney
jitendra varshney

Reputation: 3562

use this plunker

http://plnkr.co/edit/QFjUPSUENc8RiqipRT28?p=preview

use key-property = "id" and display-property="name for removing duplicacy error ,and for showing list

Upvotes: 0

hsynlms
hsynlms

Reputation: 415

I have worked on your problem and find a solution in a simple way. I have tested it and it works. I hope that is what you are looking for.

Angular script file

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];
  $scope.names = [];


  $scope.loadTags = function() {

            return $http.get('tags.json').then(function(response) {
              var data = response.data.data.data;
              $scope.names = [];

              for (var tag in data)
              {
                $scope.names.push(data[tag].name);
              }

                return $scope.names;
            });
        };

});

HTML file

<tags-input ng-model="tags" add-from-autocomplete-only="true">
<auto-complete min-length="1"
        source="loadTags()"
        template="my-custom-template"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>

Upvotes: 1

GPicazo
GPicazo

Reputation: 6676

Your code looks good. The only issue I see is that in you tags.json, you data.data objects should be in the form of {id: idVal, text: nameVal}. That is, the display field name should be 'text' instead of 'name'.

Upvotes: 0

Related Questions