Collection repeat in modal problem

ionic-v1
1

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

2

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/

3

Thank you

but the collection repeat Overlape in the same place

can you give me some ideal to separate collection repeat ?

4

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.

5

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>
6

Thank you very much it’s really help me~