{{ item.prop1 }}...">
Clever Geek Handbook

Conditionally add line to ng-repeat

I have a simple repeating table-row in AngularJS

<tr ng-repeat="item in items">
    <td>{{ item.prop1 }}</td>
    <td>{{ item.prop2 }}</td>
</tr>

My object item

has a property on it comment

, and if this comment contains a value, I want to show this on a line all separately line by line right after the rest of the elements and span the entire line. Is it possible? I looked at the ng-repeat-end, but that doesn't seem to be what I want and I can't just add and add a <tr> element inside the ng-repeat as that would be invalid HTML.

+3


source to share


1 answer


You can use ng-repeat special repeating start and end points through and . ng-repeat-start

ng-repeat-end

DEMO

Html

<table ng-controller="PostController">
  <tr ng-repeat-start="post in posts">
    <td>{{post.content}}</td>
  </tr>
  <tr ng-repeat-end ng-repeat="comment in post.comments">
    <td>{{comment.content}}</td>
  </tr>
</table>


UPDATE: If the comment is a string, just remove ng-repeat

at the endpoint ng-repeat-end

and add an expression ng-if

that checks for existence post.comment

.

DEMO

Html

<table ng-controller="PostController">
  <tr ng-repeat-start="post in posts">
    <td>{{post.content}}</td>
  </tr>
  <tr ng-repeat-end ng-if="post.comment">
    <td>{{post.comment}}</td>
  </tr>
</table>
+4


source






More articles:


All Articles