2015-06-21 116 views
0

我試圖執行ngTagsInput其中我想實現自動搜索電子郵件。因爲我寫下面的代碼。但它沒有出現自動搜索結果NgTagInput未顯示自動搜索結果

HTML:

<tags-input ng-model="compose.receiver" 
      add-from-autocomplete-only="true" 
      min-length="1"> 
    <auto-complete source="loadReceiver($query)" 
        min-length="0" 
        debounce-delay="0" 
        max-results-to-show="10" 
        loadOnEmpty="true"> 
    </auto-complete> 
</tags-input> 

控制器:

$scope.loadReceiver = function(query){ 
    return AdminInbox.loadReceiver(query); 
} 

服務:

angular.module('inboxes').factory('AdminInbox', ['$http','$q', 
    function($http,$q) { 
    return { 
     loadReceiver: function(query) { 
     console.log(query); 
     var deferred = $q.defer(); 
     var receiver = $http.get('mailreceiver/'+query); 
     console.log(receiver); 
     return deferred.promise; 
     } 
    } 
    } 
]); 

,我順利拿到迴應如下格式:

[{_id: "5579c9a4f3d71f8c2a4f1e3d" email: "[email protected]"}, 
{_id: "557f2cd3a571f9a41e4168f2" email: "[email protected]"}] 
+0

你的JSON似乎無效。解析結果時確定沒有JS錯誤嗎?這些屬性用逗號分隔。在簡要介紹一下ngTagInput後,我認爲響應對象應該包含一個** text **屬性。 '[{「text」:「aaaaaa」},{「text」:「bbbbb」}]' – Michael

+0

所以它是否意味着文本的keyName是非常必要的?我不能設置動態密鑰的電子郵件? –

+0

我不知道。請檢查ngTagInput API。有一些屬性安靜 – Michael

回答

1

有一個有效的JSON並設置display-property,它的工作原理!

angular.module('app', ['ngTagsInput']) 
 
    .run(function($rootScope) { 
 
    $rootScope.source = [{ 
 
     _id: "5579c9a4f3d71f8c2a4f1e3d", 
 
     email: "[email protected]" 
 
    }, { 
 
     _id: "557f2cd3a571f9a41e4168f2", 
 
     email: "[email protected]" 
 
    }]; 
 

 
    $rootScope.compose = { 
 
     receiver: [] 
 
    }; 
 
    });
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.3.0/ng-tags-input.js"></script> 
 
<div ng-app="app"> 
 
    <tags-input ng-model="compose.receiver" display-property="email" add-from-autocomplete-only="true" min-length="1"> 
 
    <auto-complete source="source" min-length="0" debounce-delay="0" max-results-to-show="10" loadOnEmpty="true" displayProperty="email"> 
 
    </auto-complete> 
 
    </tags-input> 
 
</div>