0

以下のリンクからangularjsサポート用のbootstrap-tagsinputプラグインを統合しようとしています

http://timschlechter.github.io/bootstrap-tagsinput/examples/

しかし、bootsrap-taginput.css と bootsrap-taginput.js と bootsrap-taginput-angular.css を追加した後に、これを HTML ファイルに追加するとき。

bootsrap タグは HTML タグとして識別されないため、ページに表示されません。これについて何が問題になる可能性があるのか​​ わかりますか？純粋に基本的なことですが、私は UI の専門家ではないため、バージョン間の一貫性についてはほとんどわかりません。少なくともbootsrap-tagsinputタグをレンダリングする必要があると感じているので、誰かが問題を教えてくれたら、そうではありません!

<bootstrap-tagsinput
ng-model="cities"
typeahead-source="queryCities"
tagclass="getTagClass"
itemvalue="value"
 itemtext="text">

ティア

4

2 に答える 2

0

bootstrap-tagsinput の単純なディレクティブの実装を探している人のために、非常に単純なディレクティブを実装しました。

'use strict';

angular.module('yourApp')
.directive('tagsInputEditor', function () {
    return {
        restrict: 'E',
        scope: {
            options: '@', //receive all the options in a JSON array - one-way binding
            selection: '='//two-way binding - the selected tags to use
        },
        replace: true,
        template: '<input id="inputCategories" type="text" data-role="tagsinput"/>',
        link: function (scope, element, attrs) {

            var el = $(element);
            var options = JSON.parse(scope.options);

            //select initial values for typeahead:
            el.val(function () {
                return cat.allCategories.map(function (category) {
                    return category.Tag;//the object used has a Tag property
                });
            });

            //configuration of typeahead options    
            el.tagsinput({
                typeahead: {
                    source: options.map(function (option) {
                        return option.Tag;
                    })
                },
                freeInput: true
            });

            //event handlers to sync data
            el.on('itemAdded', syncItems);
            el.on('itemRemoved', syncItems);

            function syncItems() {
                var items = el.val().split(',');

                //clear all items and store the new items selection
                scope.selection.length = 0;
                for (var i = 0; i < items.length; i++) {
                    scope.selection.push(items[i]);
                }

                //you should tell angular to refresh the scope and send data back to the scope    
                scope.$apply();
            }
        }
    };
});

使い方はこんな感じです。

<tags-input-editor options="{{model.categories}}" selection="model.selectedCategories" />

ご覧のとおり、コントローラーは、カテゴリと選択されたカテゴリを使用してモデルを定義します。今の私にはこれで十分です。コンポーネントの他の機能は使用していませんが、ここからは非常に簡単に続行できます。ディレクティブ内で従来の jQuery コードを使用しており、コンポーネントのドキュメントで十分なようです。

于 2014-12-10T02:22:15.523 に答える
0

次のように、終了タグを追加してみてください。

    <bootstrap-tagsinput
      ng-model="cities"
      typeahead-source="queryCities"
      tagclass="getTagClass"
      itemvalue="value"
      itemtext="text"></<bootstrap-tagsinput>
于 2014-05-30T11:56:00.103 に答える