如何在angularjs中的自动完成选项中显示引导程序弹出窗口?

时间:2016-08-21 07:00:46

标签: javascript angularjs twitter-bootstrap

我是angularjs的新手。我需要在自动填充选项上显示悬停链接,左侧是3个点as below

当我将鼠标悬停在链接上(3个点)时,我需要显示一个弹出窗口,这是一个html模板。 我无法找到显示弹出链接的方法。 顺便说一下,我正在尝试使用massautocomplete。 http://hakib.github.io/MassAutocomplete/

以下是我创建模板的方法 -

  for (var i = 0; i < users.length; i++) {
 var user = users[i];
 if (user.name.toLowerCase().indexOf(q) !== -1 ||
     user.email.toLowerCase().indexOf(q) !== -1)
   results.push({
     value: user.name,
     // Pass the object as well. Can be any property name.
     obj: user,
     label: $sce.trustAsHtml(
       '<div class="row">' +
       ' <div class="col-xs-5">' +
       '  <i class="fa fa-user"></i>' +
       '  <strong>' + highlight(user.name,term) + '</strong>'+
       ' </div>' +
       ' <div class="col-xs-6 text-right text-muted">' +
       '  <small><a href="#">' + highlight(user.email,term) + '</a></small>' +
       ' </div>' +
         '<div  class="col-xs-1">' +
           '<a uib-popover-html="\'<b>test</b>\'" '+
            'popover-placement="right" popover-trigger="\'mouseenter\'">...</a>'+
       '</div>'+

       ' <div class="col-xs-12">' +
       '  <span class="text-muted">Joined</span>' +
          user.joined +
       ' </div>'
     )
   });

}

欢迎任何建议,如果需要,我也可以使用其他自动填充库。

谢谢!

1 个答案:

答案 0 :(得分:0)

您需要修改返回结果的方式以使用&#34;传递对象&#34; MassAutocomplete示例中记录的方法然后绑定您的...以显示将内容绑定到对象上的属性的Bootstrap popover Documented Here

要使您的引导程序有角度,请使用具有特定弹出窗口实现的AngularUI。 Documented Here请参阅UI.Bootstrap.Popover。