使 angular 个标签输入起作用

Question

我正在尝试实施 ng-tags-input 在我的网站中工作，所以基本上人们需要通过从数据库中保存的可用标签列表中选择标签来输入一些标签

服务器：

exports.list = function(req, res) {

  var query = req.query;
  mongoose.set('debug', true);

  Tag
    .find({
      'text': new RegExp(query.text, 'i')
    })
    .sort({
      created: -1
    })
    .select('text')
    .exec(function(err, tags) {
      if (err) {
        return res.status(400).send({
          message: errorHandler.getErrorMessage(err)
        });
      } else {
        console.log('Tags: ', tags);
        res.json(tags);
      }
    });
};

angular 控制器：

(function() {
  'use strict';

  angular
    .module('contests')
    .controller('ContestsAddController', ContestsAddController);

  ContestsAddController.$inject = [
    '$scope',
    '$state',
    '$location',
    'Tag'
  ];

  function ContestsAddController(
    $scope,
    $state,
    $location,
    Tag
  ) {
    var vm = this;

    /** Properties */
    vm.tags = [];

    /** Methods */
    vm.loadTags = loadTags;

    function loadTags(query) {
      return Tag.load();
    }
  }
}());

查看：

<div class="form-group">
  <label class="col-md-3 control-label">With tags </label>
  <div class="col-md-9">
    <tags-input ng-model="vm.tags" add-from-autocomplete-only="true">
      <auto-complete source="vm.loadTags($query)" debounce-delay="500" load-on-empty="true"></auto-complete>
    </tags-input>
  </div>
</div>

angular 服务：

(function() {
  'use strict';

  angular
    .module('tags')
    .factory('Tag', Tag);

  Tag.$inject = [
    '$http',
    '$q',
    '$timeout',
    'Authentication',
    'Shuttle',
    'CONST'
  ];

  function Tag(
    $http,
    $q,
    $timeout,
    Authentication,
    Shuttle,
    CONST
  ) {

    var service = {
      getTags: getTags,
      load: load
    };
    var _this = this;

    return service;

    // SCOPE FUNCTIONS
    function getTags(query) {
      return Shuttle.get(CONST.EP_TAGS, query, {}, 1000, {
        Authorization: 'JWT ' + Authentication.token
      });
    }

    function load() {
      var deferred = $q.defer();
      deferred.resolve(this.getTags({}));
      return deferred.promise;
    }
  }
}());

Tag.load() 响应

[  
  {  
    "_id":"579ecc5fca552b6e89094415",
    "text":"Comedian"
  },
  {  
    "_id":"579ecc5aca552b6e89094414",
    "text":"Cardist"
  },
  {  
    "_id":"579ecc56ca552b6e89094413",
    "text":"Magician"
  },
  {  
    "_id":"579ecc4bca552b6e89094412",
    "text":"Actress"
  },
  {  
    "_id":"579ecc47ca552b6e89094411",
    "text":"Actor"
  },
  {  
    "_id":"579ecbecca552b6e89094410",
    "text":"Bassist"
  },
  {  
    "_id":"579ecbdfca552b6e8909440f",
    "text":"Guitarist"
  },
  {  
    "_id":"579ecbd9ca552b6e8909440e",
    "text":"Singer"
  },
  {  
    "_id":"579ecbc6ca552b6e8909440d",
    "text":"Dancer"
  }
]

我面临的问题是，当我输入 3 个字母时（按预期正确触发 Tag.load()，并返回上面的响应）

它不显示任何自动完成或标签建议
它立即将这 3 个字母作为标签（下图）
console.log(vm.tags); 不包括整个 Tag 对象，只包括 text 键值对

我错过了什么吗？

我正在使用 angular 1.5.0

更新

我已经添加了一个 plunker，虽然做了一些修改，但它在那里工作得很好，虽然它在我的应用程序中仍然不起作用，是 angular 版本吗？

还有一件事我忘了说，我的那个没有显示我输入的下拉菜单。

更新 #2 我使用 angular 1.5.0 更新了 plunker，这是我正在使用的版本，它正在工作，所以它不是 angular 版本。

Answer 1

所以在尝试了一些东西之后，我终于通过这样做让它工作了

我将 Tag.getTags 响应对象保留在一个变量中并在加载时调用它，而不是每次用户键入时调用它（或使用 load-on-focus 和/或 load-on-empty 参数）和使用基于 this 示例

的过滤方法

控制器

(function() {
  'use strict';

  angular
    .module('contests')
    .controller('ContestsAddController', ContestsAddController);

  ContestsAddController.$inject = [
    '$scope',
    '$state',
    '$location',
    'Tag',
    'toaster',
    'lodash'
  ];

  function ContestsAddController(
    $scope,
    $state,
    $location,
    Tag,
    toaster,
    lodash
  ) {
    var vm = this;

    /** Properties */
    vm.tagList = [];
    vm.tags = [];

    /** Methods */
    vm.loadTags = loadTags;

    function loadTags($query) {
      return vm.tagList.filter(function(tag) {
        return tag.text.toLowerCase().indexOf($query.toLowerCase()) !== -1;
      });
    }

    activate();

    function activate() {
      return _getTagList();
    }

    function _getTagList() {
      Tag
        .getTags()
        .then(function(response) {
          vm.tagList = response.data;
          return vm.tagList;
        });
    }
  }
}());

查看（不知道有没有关系）

<tags-input ng-model="vm.tags" display-property="text" add-from-autocomplete-only="true" text="text">
  <auto-complete source="vm.loadTags($query)" debounce-delay="500"></auto-complete>
</tags-input>

使 angular 个标签输入起作用

Getting angular tags input to work

angularjs

ng-tags-input