Ng-Tag-Input Directive not clearing value

Question

I am using ngTagInput directive for auto-suggestion. What I want is clear the auto-suggestion after suggestion is clicked. Though its clearing on first call of function but not on second. It is adding as tag on second function call. and I want to remove that.

On Html,

<tags-input ng-model="autoSongs"
        key-property="_id"
        display-property="name"
        add-from-autocomplete-only="true"
        replace-spaces-with-dashes="false"
        on-tag-adding="songAdded($tag)"
        on-tag-added="emptyScope()"
        template="tag-template"
        placeholder="type here to search for album..."
        on-tag-removed="songRemoved($tag)">
<auto-complete source="loadSongs($query)"
               min-length="2"
               debounce-delay="5"
               max-results-to-show="10"
               template="autocomplete-template"></auto-complete>
</tags-input>

This way on controller,

$scope.loadSongs = function(query) {
        var autoFilter = 'name=' + query;
        return songService.autoSuggest(autoFilter, function(error, data) {
            if (error) {
                toastr.error(error.message, 'Error');
                return false;
            }
            return data;
        });
    };

    $scope.songAdded = function(query) {
        if ($scope.pushArray.checkbox.length === 0) {
            toastr.error('Select record to assign album.', 'Error');
            return false;
        }
        var songId = query._id,
            songName = query.name;
        videoService.assignSong(songId, $scope.pushArray.checkbox, function(err, resonse) {
            if (err) {
                toastr.error(err.message, 'Error');
            } else {
                $scope.emptyScope();
                toastr.success('\'' + songName + '\' has been assigned to ' + resonse + ' records', 'Success');
                $scope.pageChanged();
            }
        });
        return true;
    };

    $scope.emptyScope = function() { 
        $scope.autoSongs = null;
    };

Its not clearing value on second attempt. Can I use auto-suggestion with callbacks separately?

plunker

Here is a Plunker from your code (incomplete): http://plnkr.co/edit/KXGnBM3oAvgQrDHRkgiP?p=preview. Could you complete it (also with "stub" services)? Otherwise it's really hard to help you... — beaver, Dec 21 '15 at 18:56
HI Beaver, I have updated the plunker. Sorry its first time I am trying to put code on it. Issue is, its not making model empty. instantly. try it twice or thrice or more time. — Sankalp, Dec 23 '15 at 16:15
it's very unlikely that someone could verify your code and suggest you a solution without definition of your services `songService` and `videoService`, at least as stubs... — beaver, Dec 23 '15 at 17:48
But I have updated the songService N VideoService in plunker. Its not visible now. I fork it after modifying their. — Sankalp, Dec 24 '15 at 05:52
So you have to edit your answer adding link to your Plunker (the forked one which has a different url from the original one) — beaver, Dec 24 '15 at 06:10
you just want to empty `$scope.autoSongs`? check my answer below — koox00, Dec 26 '15 at 11:18

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

If you console log the value of $scope.autoSongs you will find out that it is indeed an array.
So your function that empties the value has to be like this:

$scope.emptyScope = function() {
    //$scope.autoSongs = null;

    $scope.autoSongs = [];
};

working plunker

PS: please read also this SO answer about emptying an array.

edited May 23 '17 at 11:52

Community

1
1

answered Dec 25 '15 at 15:22

koox00

2,691
2
15
25

1

I have done it already. Issues is when I first enter value it works, but when I type second time, it remains on textbox. Check my plunker – Sankalp Dec 27 '15 at 07:38
I checked your plunker and when I replace `null` with `[]` inside empty scope function it works. did you even tried it? – koox00 Dec 27 '15 at 08:11
Please read whole the story including comments. You would find this solution is already implemented. – Sankalp Dec 28 '15 at 05:58
Add India, then without refreshing add Germany, then chezk. Its clearing on 1st, 3rd suggestion but not on second one. – Sankalp Dec 28 '15 at 06:00

score 0 · Answer 2 · answered Dec 27 '15 at 21:48

0

This Plunker seems to work nicely.

on-tag-adding="songAdded($tag)"

Seems to be the only event you need to trigger.

answered Dec 27 '15 at 21:48

gr3g

2,866
5
28
52

beaver · Answer 3 · 2015-12-25T20:07:42.773

I've tried using $timeout in order to differ emptyScope() function; check if the result is as you want:

var app = angular.module('myApp', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $timeout, songService) {
  $scope.autoSongs = [];

  $scope.loadSongs = function(query) {
    console.log("loadSongs: " + query);
    return songService.autoSuggest(query);
  };

  $scope.songAdded = function(query) {
     console.log("songAdded: " + query);
    var songId = query._id,
      songName = query.name;

    $timeout(function() {
      console.log("$timeout: ");
      $scope.emptyScope();
    });

    return true;
  };

  $scope.emptyScope = function() {
    console.log("emptyScope: ");
    $scope.autoSongs = [];
  };
});

app.factory('songService', function() {
 var autoSuggest = function(autoFilter) {
   console.log("autoSuggest: " + autoFilter);
    if (autoFilter == "i")
      return [{name: 'India',_id: 1}, {name: 'Indonesia',_id: 2},{name: 'Italy',_id: 3}  ];
    else if (autoFilter == "u")
      return [{name: 'United Arab',_id: 4}, {name: 'Uganda',_id: 5},{name: 'USA',_id: 6}  ];
    else
    return [{name: 'Germany',_id: 7}, {name: 'Greece',_id: 8},{name: 'Chezk',_id: 9}  ];
  }
  return {autoSuggest:autoSuggest};
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <!--link rel="stylesheet" href="style.css" /-->
  <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <tags-input ng-model="autoSongs" key-property="_id" display-property="name" add-from-autocomplete-only="true" replace-spaces-with-dashes="false" on-tag-adding="songAdded($tag)" on-tag-added="emptyScope()" placeholder="type here to search for album..."
  on-tag-removed="songRemoved($tag)">
    <auto-complete source="loadSongs($query)" min-length="1" debounce-delay="5" max-results-to-show="10"></auto-complete>
  </tags-input>

  <p>Model: {{autoSongs}}</p>
    <p>Search with I or U or else</p>
</body>

</html>

And also the Plunker updated: http://plnkr.co/edit/7nt3toEclsP5HXL7RadP?p=preview

It didn't work. Enter value first it gets empty. Then enter second it remains on text input. When you put third then it empty it again. — Sankalp, Dec 27 '15 at 07:43

Ng-Tag-Input Directive not clearing value

3 Answers3