2

我正在尝试实现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);
      }
    });
};

角度控制器：

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

角度服务：

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

在此处输入图像描述

有什么我想念的吗？

我正在使用角度 1.5.0

更新

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

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

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

4

1 回答 1

0

所以在尝试了一些事情之后，我终于通过这样做

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

控制器

(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>
于 2016-08-03T06:53:33.037 回答