Iterate through two array at the same time in Angular JS

Question

I have two array and I want to display them in a conversation manner using ng-repeat

assume two array are defined like this

messages_send = ["hi","good, How about you?","cool","LOL","NFW"]   
messages_received = ["hey, How are you?","good, Thanks","hmmm","asdfsda"]

<ul>
    <span ng-repeat="i in [0,1,2,3,4]">
        <li>
            messages_send[i]
        </li>
        <li>
            messages_received[i]
        </li>
    </span>
</ul>

I did it that way and it wroked only problem is it messed up the conversation layout I had. Is there another way to do this I mean iterating through two arrays using ng-reapet without messing up the layout ?

Thanks

why not map them to one array?

charlietfl
– charlietfl

2014-07-04 15:09:52 +00:00
Commented Jul 4, 2014 at 15:09 — charlietfl
– charlietfl, Commented Jul 4, 2014 at 15:09

lucuma · Accepted Answer · 2014-07-04 14:36:35Z

1

You could do some variation of this but you'll need to error check the array to make sure it has the same number of elements. I'm just using an ng-show for that error check but something like this:

<ul>
    <span ng-repeat="msg in messages_send track by $index>
        <li>
            {{msg}}
        </li>
        <li> 
          <span ng-show='messages_received.length>=$index'>
            {{messages_received[$index]}}
          </span>
        </li>
    </span>
</ul>

answered Jul 4, 2014 at 14:36

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterate through two array at the same time in Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related