这是我的index.html
<form ng-controller = "emailViewController">
<tags-input placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;">
</tags-input>
<br />
<input type="text" placeholder="Subject" style="width:95%;"><br />
<textarea style="width:95%;" rows="10"></textarea>
</form>
emailViewController.js
(function() {
'use strict';
var emailViewController = function (fetchDataService,$scope,$filter) {
var url = 'app/mock/emails.json';
fetchDataService.getContent(url)
.then(function(response){
$scope.emails = response.data;
$scope.to = [];
angular.forEach($scope.emails, function(key, value) {
$scope.to.push(key.to);
})
$scope.loadEmails('Primary');
});
}
angular.module('iisEmail')
.controller ('emailViewController',
['fetchDataService', '$scope','$filter', emailViewController]);
}());
在我删除
Typeahead
标记(它是其属性)并添加input
指令之前,tags-input
正常工作。所以,我之前有<input placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;">
。现在,我有<tags-input placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;">
,它不起作用。我认为发生这种情况是因为
typeahead
仅适用于input tags
。有人对如何使typeahead
与ngTagsInput
一起使用有想法吗?为了避免混淆,我想明确地说,我知道如何将
autocomplete
与ngTagsInput
一起使用。我的问题是专门针对使用typeahead
和ngTagsInput
所面临的问题。这是一个小矮人:http://plnkr.co/edit/B1aV9TLu58a2iGhpTUrN?p=preview
更新
我使用
angular-tags
而不是ngTagsInput
解决了问题。 ngTagsInput
不适用于typeahead
。选择的最佳答案很好地解释了为什么会这样。这是使用angular-tags
-http://plnkr.co/edit/PaG1k5N37BTOflObnN7K?p=preview解决此问题的Plunker 最佳答案
ngTagsInput不能与ui.bootstrap.typeahead一起使用,因为它本身会生成输入元素,并且typeahead属性不会最终出现在所生成的输入元素上。
<tags-input placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;">
最终是:
<tags-input placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-max-tags ng-valid-min-tags ng-valid-leftover-text" aria-autocomplete="list"
aria-expanded="false" aria-owns="typeahead-5-8574">
<div class="host" tabindex="-1" ng-click="eventHandlers.host.click()" ti-transclude-append="">
<div class="tags" ng-class="{focused: hasFocus}">
<ul class="tag-list">
<!-- ngRepeat: tag in tagList.items track by track(tag) -->
</ul>
<input class="input ng-pristine ng-untouched ng-valid" autocomplete="off" ng-model="newTag.text" ng-model-options="{getterSetter: true}" ng-keydown="eventHandlers.input.keydown($event)" ng-focus="eventHandlers.input.focus($event)" ng-blur="eventHandlers.input.blur($event)"
ng-paste="eventHandlers.input.paste($event)" ng-trim="false" ng-class="{'invalid-tag': newTag.invalid}" ng-disabled="disabled" ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
ti-autosize="" type="text" placeholder="To" spellcheck="true" style="width: 20px;"><span class="input" style="visibility: hidden; width: auto; white-space: pre; display: none;">To</span>
</div>
</div>
</tags-input>
ngTagsInput似乎也没有提供实现此目的的方法。由于它提供了自己的搜索机制,因此可能不允许使用外部的搜索机制。