は、複数の選択肢の選択制御のダイナミックツールチップ

Question

おはようを表示：

私はAngular JS ui-selectコントロール（Angular JS - ui-select）内のすべての選択された選択肢にカスタムツールチップを追加しようとしています。

のcontroler（fc）は、contactのfullName属性に基づいて、機能が含まれている関連するツールチップのテキストでstringを取得します。

ユーザーが選択した項目に基づいて別のツールチップを表示する方法が見つからないようです。

コントロールのコードの抜粋は以下の通りです：

<ui-select multiple ng-model="fc.contacts" title="Contacts" on-select="fc.addContact($item)" on-remove="fc.removeContact($item)"> 
    <ui-select-match placeholder="Add contact..."> 
     {{$item.fullName}} 
    </ui-select-match> 
    <ui-select-choices repeat="contact in fc.contacts | filter:$select.search"> 
     {{contact.fullName}} 
    </ui-select-choices> 
</ui-select> 

我々は追加しようとしているツールチップは角UIブートストラップのツールチップコントロールです：

uib-tooltip-html="fc.getTooltip($item.fullName)"

アイデアが"Lorem Ipsum"上にマウスを移動するときということです関連するツールチップがポップアップ表示され、"Foo Bar"にカーソルを移動すると、その特定のツールチップが表示されます。高度で

ありがとう！

Answer 1

私はこの質問がちょうど約1年前だと知っていますが、私はずっと前と同じようなことをやろうとしていました。他の誰かが興味を持っている場合に備えて私のソリューションを投稿する。

私はちょうどあなたがAngular UI Bootstrap's tooltip attributeでスパンタグの選択一致をラップしたという例外を除けば、あなたがスニペットに持っているものを持っていました。

<ui-select-match placeholder="Select person..."> 
    <span uib-tooltip="{{$item.fullname}}" tooltip-placement="bottom-right">{{$item.name}} &lt;{{$item.email}}&gt;</span> 
</ui-select-match> 

参考のため、JSFiddleをまとめました。明確にするために、ドキュメンテーションからマルチセレクションのデモをスタイリングに合わせるために、同じバージョンのui-selectとbootstrapを使用しました。