2

Web サイト内で機能するように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キーと値のペアのみが含まれています

ここに画像の説明を入力

私が逃したものはありますか？

私はAngular 1.5.0を使用しています

アップデート

いくつかの変更を加えてプランカーを追加しましたが、アプリではまだ機能しませんが、角度のあるバージョンですか?

私が言及するのを忘れていたもう1つのことは、私が入力したドロップダウンが表示されていないことです。

更新＃2 私が使用しているものであるAngular 1.5.0を使用してプランカーを更新し、それが機能しているため、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 に答える