CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrappopover
Eric Mitjans
Eric Mitjans

Reputation: 2179

ng-repeat nested inside Popover not working

I have the following ng-repeat list:

<div class="row msf-row" 
     ng-repeat="record in recordlist 
     people-popover>
       <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem"> 
          <button class="btn btn-primary form-control msf-paxlist" 
                  rel="popover" 
                  data-content="<li ng-repeat='passanger in record.pax'>
                                   {{passanger.name}}
                                </li>" 
                  data-original-title="Passanger List">
              {{record.pax.length}} <i class="fa fa-user"></i>
          </button>
       </div>
</div>

I initialize the popover with a directive:

.directive('peoplePopover', function() {
    return function(scope, element, attrs) {
        element.find("button[rel=popover]").popover({ placement: 'bottom', html: 'true'});
    };
})

The problem is the <li ng-repeat="pasanger in record.pax">{{pasanger.name}}</li>, which will not show.

If I use <li ng-repeat="record.pax">{{pax}}</li>, it will display the array, but if I try to list the objects of the array with ng-repeat, it won't work.

This is how the array (record) looks like:

record in recordlist {
    date : "02/12/2014"
    time : "00.02.01"
    car : "369"
    pax: [
        {
        name : "Ben"
        chosen : true
        },
        {
        name : "Eric"
        chosen : true
        }
    ]
}

Any tips?

Upvotes: 2

Views: 1305

Answers (1)

Harish
Harish

Reputation: 1519

I ran into similar problem and I solved it this way.

I wrapped the ng-repeat block in another directive and pass the collection to that external directive.

div class="row msf-row" 
     ng-repeat="record in recordlist 
     people-popover>
       <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem"> 
          <button class="btn btn-primary form-control msf-paxlist" 
                  rel="popover" 
                  data-content="<new-directive records=record.pax></new-directive>" 
                  data-original-title="Passanger List">
              {{record.pax.length}} <i class="fa fa-user"></i>
          </button>
       </div>
</div>

Inside the new directive, you will have this code.

<li ng-repeat='passanger in record.pax'>
         {{passanger.name}}
</li>

Hopefully this helps someone who runs into similar problem.

Upvotes: 1

Related Questions