Collection repeat in modal problem

Hello everyone

when i put collection repeat in modal , the collection repeat can’t show

here is my codepan ionic version beta4

Thank you help me

The main issue is that the modal is not defined quite right. You weren’t passing it the current scope.

$ionicModal.fromTemplateUrl('modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal; // Was missing
  });

See this : http://codepen.io/calendee/pen/Acxli based on http://ionicframework.com/docs/api/service/$ionicModal/

Thank you

but the collection repeat Overlape in the same place

can you give me some ideal to separate collection repeat ?

Much of that has to do with CSS, which I am lousy at.

However, I tidied up your code a bit to make it look better. However, it then only displays one item in the whole modal.

I think most of the problem is due to the way modals work. They take a while to animate and render on the view. As that is happening, collection-repeat is trying to display. So collection-repeat has to be delayed to not render the list until after the modal is in position and ready.

See the updated sample with adding a delay and not showing the collection until after the modal is updated.

Updating the height to 150 will take care of the overlapping.

 <ion-content>
          <div class="list" ng-if="showList">
          <div collection-repeat='friend in friends'
               collection-item-width="'100%'"
               collection-item-height="150"
               class="item my-item">
            <img src="http://fakeimg.pl/100/">
              <h2>{{friend.name}}</h2>
          </div>
            </div>
        </ion-content>

Thank you very much it’s really help me~