Angularjs 将角度标记输入到工作中

我正试图实现在我的网站内工作，所以基本上人们需要通过从数据库中保存的可用标记列表中选择标记来输入一些标记

服务器：

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

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

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

角度控制器：

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

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

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

查看：

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

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）

  不包括整个标记对象，只包括

  文本

  键值对

我错过了什么吗

我使用的是angular 1.5.0

更新

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

还有一件事我忘了提，我的那个在我打字时没有显示下拉列表

更新#2

---

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

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

我在变量中保留了

标记.getTags

响应对象，并在加载时调用它，而不是每次用户键入（或使用焦点加载和/或空参数加载）时调用它，并使用基于示例的筛选方法

控制器

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

查看（不知道这是否相关）

您能提供一个Plunker来说明您的问题吗？您可以使用。@MichaelBenford添加了一个plunker