获取角度标签输入工作

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

角控制器：

(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);不包括整个标签对象，只是text键值对

是不是我错过了什么？

我使用的角度1.5.0

UPDATE

我添加了一个plunker尽管有一些修改，但它工作得很好那里，虽然它仍然在我的应用程序无法正常工作，它是角度版吗？

还有一件事，我忘了提及，我的一个在我打字时没有显示下拉菜单。

更新＃2 我更新了使用角度1.5.0这是我正在使用的，它的工作，所以它没有角度版本的plunker。

Answer 1

所以尝试了几件事情后，我终于得到它做这个

工作，我保留了Tag.getTags响应对象在一个变量，并调用它的负载，而不是调用它的每一次用户输入（或使用负载在焦点上和或负载上空参数），并使用基于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>