CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
somebody
somebody

Reputation: 1107

How to add bootstrap popover to angular ng-repeat

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

And JS code in AngularJS controller:

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

I want to add bootstrap popover to red <tr>. For example:

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

And initialize popover:

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

How to dinamic add id, data-content and title to red rows?

Upvotes: 0

Views: 2490

Answers (2)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

here is a plunker by using 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

Upvotes: 1

user1050438
user1050438

Reputation:

Use angular-ui or make simple wrapper

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

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

Upvotes: 0

Related Questions