如何在Angularjs ng-repeat中使用Bootstrap工具提示为div

时间:2015-09-15 12:49:54

标签: angularjs

<div data-ng-repeat="provider in providers">
<div>
<input type="checkbox" data-toggle="tooltip" data-placement="top" 
data-original-title="Default tooltip"/>&nbsp;
<b>Add to compare</b>
</div>
</div>

如果在ng-repeat下使用此代码则无法正常工作。如果我在没有ng-repeat的情况下使用它就可以了。

1 个答案:

答案 0 :(得分:3)

这是因为attribute使用的Bootstrap Tooltip Title是&#34; title&#34;而不是&#34; data-original-title&#34;

您可以使用

<强> HTML

<div data-ng-repeat="provider in providers">
      <div>
        <input type="checkbox" data-toggle="tooltip" data-placement="right" title="Provider {{provider}}" />
        <b>Add to compare</b>
      </div>
    </div>

<强>角

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  // Check/uncheck all boxes
  $scope.providers = [1,2,3,4,5,6];


});

参考Plunker

参考Bootstrap Tooltip