ImNotMike ImNotMike - 3 months ago 12
AngularJS Question

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
chuck.norris@example.org
and
chuck@example.com
(excluding the
hrefs
just to make reading more clear), would be:

<ul>
<li><a href="...">Email chuck.norris@example.org</a></li>
<li><a href="...">Send message to chuck.norris@example.org</a></li>
<li><a href="...">Email chuck@example.com</a></li>
<li><a href="...">Send message to chuck@example.com</a></li>
</ul>


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

Answer

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

Comments