Conditional HTML with ng-repeat

Question

Here is the code:

tr.row(ng-class="{editing: is_dirty(p)}" ng-repeat="p in persons")
 td {{p.name}}
 td {{p.surname}} 

 if is_dirty(p)
   button.action Save
 else
   button.action Edit
   button.action Delete

I am starting with my interface, will try to implement some inline editing. So the first step in this is that I list all persons, and on click I add a new row. Now, a new row should only have the save button, existing rows would have an edit and a delete button.

The above code does not work (using jade, express, node and angular). I've looked at ng-switch and ng-if but they look overly complex to me for a simple if else...

Answer 1

If is_dirty(p) is a method available in your scope, you can use

ng-show="is_dirty(p)"

or

ng-hide="is_dirty(p)"

ng-show will display the element when is_dirty returns true. ng-hide will hide the element when is_dirty returns true.

ng-if is similar to ng-show, but the element will be destroyed from the dom instead of being hidden when the condition is false.

Answer 2

Have you tried this:

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

http://docs.angularjs.org/api/ng.directive:ngSwitch