CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Digital Ninja
Digital Ninja

Reputation: 3731

How do I list two elements per item in array?

I have several email addresses per user, and I want to give two options per each of those addresses; one is to send email directly, and another one is to send a message via a web form. But how do I enlist two <li> elements under a single ngRepeated element?

If I do:

<span ng-repeat="email in User.emails">
 <li><a ng-attr-href="mailto:{{ email }}">Email {{ email }}</a></li>
 <li><a ng-href="#/SendMessage?email={{ email }}">Send message to {{ email }}</a></li>
</span>

Then I'm breaking the HTML structure and semantics.

If I do:

 <li ng-repeat="email in User.emails"><a ng-attr-href="mailto:{{ email }}">Email {{ email }}</a></li>
 <li ng-repeat="email in User.emails"><a ng-href="#/SendMessage?email={{ email }}">Send message to {{ email }}</a></li>

Then the emails are not in order (because the preferred order is to give primary email address first).

So the ideal output, assuming your email addresses are [email protected] and [email protected] (excluding the hrefs just to make reading more clear), would be:

<ul>
 <li><a href="...">Email [email protected]</a></li>
 <li><a href="...">Send message to [email protected]</a></li>
 <li><a href="...">Email [email protected]</a></li>
 <li><a href="...">Send message to [email protected]</a></li>
</ul>

How do I do this, without adding disallowed elements into a <ul>?

Upvotes: 0

Views: 92

Answers (1)

Corporalis
Corporalis

Reputation: 1062

If you want to keep the structure the same you can use ng-repeat-start and ng-repeat-end. Check out https://docs.angularjs.org/api/ng/directive/ngRepeat and look for the Special repeat start and end points section

Upvotes: 1

Related Questions