使用angular显示bootstrap popover中的动态内容

时间:2017-10-02 18:47:43

标签: javascript css angularjs twitter-bootstrap

我有一个页面显示来自使用角度2的服务提供的对象的一些字段。我想仅在用户将鼠标悬停在某个div上时显示其中一些字段。我认为bootstrap popover是理想的但我不确定如何在bootstrap popover的data-content元素中显示那些额外的字段。这是我的尝试代码。

div class="container">
  <div class="row">       
    <div class="col-sm-4 col-lg-4 col-md-4" data-toggle="tooltip" title="Name">
      {{data.name}}
    </div>
    <div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="A Date">
      {{data.aDate  | date:'shortDate'}}
    </div>
     <div class="col-sm-2 col-lg-2 col-md-2" data-toggle="tooltip" title="other">
      {{data.other}}
    </div>

    <div class="col-sm-4 col-lg-4 col-md-4" data-toggle="popover" title="More data" data-content="how to display data.field1, data.field2" >
      Popover test
    </div>
  </div>
</div>

在popover数据内容中,我想显示一个看起来像

的多行
field1: {{data.field1}}
field2: {{data.field2}}

我对bootstrap和angular都不熟悉,也许popover甚至不是显示这些数据的最佳方式?

0 个答案:

没有答案