Menu icon Foundation
Issue with ngRepeat for modal view

I'm using F4A with a controller connecting to an API and ngRepeat to display the information. Everything works fine on the cards but when I click on the card to show a modal view it's not the same information as the item I clicked...what am I doing wrong? see the code below...

For example if I click on the card in the image it's showing a different category (than vinyls)...

<div class="grid-block small-12 small-up-2 medium-up-2 large-up-3" ng-controller="productsCtrl" ng-class="">
  <div class="grid-content" ng-repeat="productsItem in productsItems | filter:search:strict">
    <a zf-open="basicModal"><div class="dark card">
      <img ng-src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{productsItem.image}}" class="cardSize" alt="{{productsItem.name}}">
      <div class="card-divider">
        {{productsItem.category}}
      </div>
      <div class="card-section">
        <h4>{{productsItem.name}} - {{productsItem.brand}}</h4>
        <p>{{productsItem.description | limitTo: 55}}</p>
      </div>
    </div></a>
    <div zf-modal="" id="basicModal">
      <a zf-close="" class="close-button">×</a>
      <h3>{{productsItem.category}}</h3>
      <p>{{productsItem.description}}</p>
      <a class="button outilBtn" href="{{productsItem.link}}" target="_blank">Voir site</a>
    </div>
  </div>
</div>
            

         

Screen shot 2015 03 02 at 5.05.41 pm

I'm using F4A with a controller connecting to an API and ngRepeat to display the information. Everything works fine on the cards but when I click on the card to show a modal view it's not the same information as the item I clicked...what am I doing wrong? see the code below...

For example if I click on the card in the image it's showing a different category (than vinyls)...

<div class="grid-block small-12 small-up-2 medium-up-2 large-up-3" ng-controller="productsCtrl" ng-class="">
  <div class="grid-content" ng-repeat="productsItem in productsItems | filter:search:strict">
    <a zf-open="basicModal"><div class="dark card">
      <img ng-src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{productsItem.image}}" class="cardSize" alt="{{productsItem.name}}">
      <div class="card-divider">
        {{productsItem.category}}
      </div>
      <div class="card-section">
        <h4>{{productsItem.name}} - {{productsItem.brand}}</h4>
        <p>{{productsItem.description | limitTo: 55}}</p>
      </div>
    </div></a>
    <div zf-modal="" id="basicModal">
      <a zf-close="" class="close-button">×</a>
      <h3>{{productsItem.category}}</h3>
      <p>{{productsItem.description}}</p>
      <a class="button outilBtn" href="{{productsItem.link}}" target="_blank">Voir site</a>
    </div>
  </div>
</div>
            

         

Screen shot 2015 03 02 at 5.05.41 pm

This post has been closed. No new replies can be added.

Jeanie Chung over 4 years ago

It might be because you're including the modal inside the ng-repeat and it carries the same id for multiple modals. You could either create a separate instance for a modal for each element in your productsItem array.

<div class="grid-block small-12 small-up-2 medium-up-2 large-up-3" ng-controller="productsCtrl" ng-class="">
  <div class="grid-content" ng-repeat="productsItem in productsItems | filter:search:strict">
    <a zf-open="{{ REPLACE THIS WITH A DIFFERENT ID }}"><div class="dark card">
      <img ng-src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{productsItem.image}}" class="cardSize" alt="{{productsItem.name}}">
      <div class="card-divider">
        {{productsItem.category}}
      </div>
      <div class="card-section">
        <h4>{{productsItem.name}} - {{productsItem.brand}}</h4>
        <p>{{productsItem.description | limitTo: 55}}</p>
      </div>
    </div></a>
    <div zf-modal="" id="{{ REPLACE THIS WITH A DIFFERENT ID }}">
      <a zf-close="" class="close-button">×</a>
      <h3>{{productsItem.category}}</h3>
      <p>{{productsItem.description}}</p>
      <a class="button outilBtn" href="{{productsItem.link}}" target="_blank">Voir site</a>
    </div>
  </div>
</div>

Emmanuel Henri over 4 years ago

Thanks that was it. I assigned #{{$index}} to both zf-open and zf-close and it worked.