2016-04-11 26 views
2

Günaydın: Ben bir Angular JS ui-select kontrol (Angular JS - ui-select) her seçilen seçenek için özel bir araç ipucu eklemek çalışıyorumGösterilen dinamik ipuçları

.

Kontrolcü (fc), contact sitesindeki fullName özelliğe göre ilişkili Tooltip metninin bir string elde eden bir işlev içerir.

Kullanıcının tercih ettiği seçeneğe göre farklı bir araç ipucunun nasıl bulunacağını anlayamıyorum.

<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> 

biz eklemeye çalıştığınız araç ipucu olduğunu Açısal UI Bootstrap adlı Tooltip kontrolü:

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

fikri "Lorem Ipsum" üzerinde olduğunu seyretmektedir

denetimin kod alıntısı şudur onun ilişkili araç ipucu açılır ve "Foo Bar" üzerinde gezinirken, onun özel biri gösterecektir. gelişmiş

Select Image

teşekkürler!

cevap

1

Bu sorunun yaklaşık bir yıl kadar olduğunu biliyorum ama benzer bir şeyi uzun zaman önce yapmaya çalışıyorum. Başka birinin ilgilenmesi durumunda çözümümün gönderilmesi.

Parçacıkta neye sahip olduğumu, Angular UI Bootstrap's tooltip attribute ile bir yayılma etiketi içinde seçtiğim parçayı yeni eklediğim istisnayla hemen hemen vardı.

<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> 

Referans için bir JSFiddle araya koydum. Açık olmak gerekirse, ui-select ve bootstrap için aynı versiyonları kullanarak, stil tasarımına göre dokümantasyondan Çoklu Seçim demosu olarak kullanıyorum.

+0

Bu harika çalıştı! Teşekkür ederim :) –