獲取角度標籤輸入工作

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>