Question

我有angular ng-repeat：

<tr data-ng-repeat="employee in employees" ng-class="getClassForEmployee(employee.redRow)" >
    <td>{{employee.last_name}}</td>
    <td>{{employee.first_name}}</td>
    <td>{{employee.departmentName}}</td>
    <td>{{employee.dateContractEnd}}</td>
    <td><a class="btn btn-success btn-sm" href="#employeeCorrect/{{employee.id}}">Редактировать</a></td>
</tr>

AngularJS控制器中的JS代码：

$scope.getClassForEmployee = function (employeeRedRow) {
    if (employeeRedRow) {
        return "alert alert-danger";
    }
};

我想将bootstrap popover添加到红色 <tr>。例如：

 <tr id="popover" data-content="something" title="something">

初始化popover：

$("tr[id=popover]").popover({placement:"top",trigger:"hover"});

如何将id，数据内容和标题添加到红行？

Answer 1

这是plunker使用angular-ui bootstrap：）

 .... popover="{{ (employee.redRow) ? employee.first_name : '' }}" ....
if employee.redRow is true we add firstname as the poop
else we pass nothing for the poop then its not gonna show the poop

Answer 2

使用angular-ui或制作简单的包装

module.directive('jsPopover', [function () {
  return {
    scope: {
      params: '=jsPopover'
    },
    link: function ($scope, $element) {
      $element.popover($scope.params);

      $scope.$on('$destroy', function () {
        $element.popover('destroy');
      });
    }
  } 
}]);

如何将bootstrap popover添加到角度ng-repeat

2 个答案: