Marshall Marshall - 8 days ago 4
AngularJS Question

How to use ng-repeat in multiple div's?

I am working with angularJS ng-repeat. So, I want to use my ng-repeat value in another div. I am doing the following. But it doesn't loop through and give me the exact value.

Code in ng-repeat

<div uib-slide index="$index" class="uibSlider" ng-repeat='id in code' ng-click="$parent.ContentId = id.ContentId" ng-class="{'selected' : ContentId.Id === ContentId}">
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>


Code in Another Div

<div>
<label>{{(code| filter: {Id: ContentId}: true)[1].ContentId}}</label>
</div>


So, the problem is I have bunch of data and in the another div if I make the array value from 0 to 1. i'm getting null value. But automatically the value isn't changing based on what I contentID select. It always gives me the same value. I'm not sure where I'm going wrong.

Any Help would be appreciated.

Answer

You can use ng-repeat-start | ng-repeat-end

<div uib-slide ng-repeat-start='id in code'>
  <paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
<div ng-repeat-end>
  <label>{{(id.ContentId}}</label>
</div>

If you are trying to show the same data in a modal, depending where the user clicks:

<div ng-repeat="id in code">
  <!-- when the user clicks here, the modal will open. The ID will be the same as the one clicking -->

  <a ng-click="openModal(id)">Open modal for id: {{id}}</a>
</div>

Then in your controller you will have a function called openModal which takes a parameter (id) that will open the modal and pass along the data.