0

これは私の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]);
}());

Typeaheadinputタグ（属性であった）を削除して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

4

1 に答える 1

1

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も、これを実現する方法を提供していないようです。独自の検索メカニズムを提供するため、おそらく外部のものを使用することはできません。

于 2015-08-25T21:13:28.253 に答える