Директива Ng-Tag-Input не очищает значение

Я использую директиву ngTagInput для автоматического предложения. То, что я хочу, это очистить автопредложение после нажатия на предложение. Хотя его очистка при первом вызове функции, а не при втором. Он добавляется как тег при втором вызове функции. и я хочу удалить это.

На 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>

Таким образом на контроллере,

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

Его значение не очищается со второй попытки. Могу ли я использовать самовнушение с обратными вызовами отдельно?

плункер


javascript angularjs ng-tags-input
person Sankalp    schedule 10.12.2015    source источник
comment
Вот плункер из вашего кода (неполный): plnkr.co/edit/KXGnBM3oAvgQrDHRkgiP?p=preview . Не могли бы вы завершить его (также с заглушками)? Иначе очень сложно вам помочь...   -  person beaver    schedule 21.12.2015
comment
Привет, Бобер, я обновил плункер. Извините, это первый раз, когда я пытаюсь поместить на него код. Проблема в том, что модель не становится пустой. немедленно. попробуйте дважды или трижды или больше раз.   -  person Sankalp    schedule 23.12.2015
comment
очень маловероятно, что кто-то сможет проверить ваш код и предложить вам решение без определения ваших сервисов songService и videoService хотя бы в виде заглушек...   -  person beaver    schedule 23.12.2015
comment
Но я обновил songService N VideoService в plunker. Его сейчас не видно. Я разветвляю его после изменения их.   -  person Sankalp    schedule 24.12.2015
comment
Поэтому вам нужно отредактировать свой ответ, добавив ссылку на свой плункер (разветвленный, который имеет другой URL-адрес, чем исходный)   -  person beaver    schedule 24.12.2015
comment
вы просто хотите очистить $scope.autoSongs? проверьте мой ответ ниже   -  person koox00    schedule 26.12.2015

Ответы (3)


arrow_upward
2
arrow_downward

Если вы запишете в консоль значение $scope.autoSongs, вы обнаружите, что это действительно array.
Таким образом, ваша функция, очищающая значение, должна быть такой:

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

    $scope.autoSongs = [];
};

рабочий плункер

PS: прочтите также этот ответ SO об очистке массива.

person koox00    schedule 25.12.2015
comment
Я уже сделал это. Проблема в том, что когда я впервые ввожу значение, оно работает, но когда я набираю второй раз, оно остается в текстовом поле. Проверьте мой плункер - person Sankalp; 27.12.2015
comment
Я проверил ваш плункер, и когда я заменил null на [] внутри функции пустой области, он работает. ты хоть пробовал? - person koox00; 27.12.2015
comment
Пожалуйста, прочитайте всю историю, включая комментарии. Вы обнаружите, что это решение уже реализовано. - person Sankalp; 28.12.2015
comment
Добавить Индию, потом без обновления добавить Германию, потом ческ. Его очистка на 1-м, 3-м предложении, но не на втором. - person Sankalp; 28.12.2015

arrow_upward
0
arrow_downward

Этот Plunker работает хорошо.

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

Кажется, это единственное событие, которое вам нужно вызвать.

person gr3g    schedule 27.12.2015

arrow_upward
-1
arrow_downward

Я пытался использовать $timeout, чтобы изменить emptyScope() функцию; проверьте, соответствует ли результат тому, что вы хотите:

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>

А также обновлен плункер: http://plnkr.co/edit/7nt3toEclsP5HXL7RadP?p=preview

person beaver    schedule 25.12.2015
comment
Это не сработало. Сначала введите значение, оно становится пустым. Затем введите второй, он остается на вводе текста. Когда вы ставите третий, он снова опустошает его. - person Sankalp; 27.12.2015