带有 ng-repeat 的条件 HTML答案

【问题标题】：Conditional HTML with ng-repeat带有 ng-repeat 的条件 HTML
【发布时间】：2013-11-14 16:03:30
【问题描述】：

代码如下：

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

我从我的界面开始，将尝试实现一些内联编辑。因此，第一步是列出所有人员，然后单击添加新行。现在，一个新行应该只有保存按钮，现有行应该有一个编辑和一个删除按钮。

上面的代码不起作用（使用jade、express、node和angular）。我看过ng-switch 和ng-if，但它们对我来说看起来过于复杂，如果不是这样的话......

【问题讨论】：

标签： javascript angularjs pug ng-repeat

【解决方案1】：

如果 is_dirty(p) 是您范围内可用的方法，则可以使用

ng-show="is_dirty(p)"

或

ng-hide="is_dirty(p)"

ng-show 将在 is_dirty 返回 true 时显示元素。当 is_dirty 返回 true 时，ng-hide 将隐藏元素。

ng-if 和 ng-show 类似，但是当条件为 false 时，元素会从 dom 中销毁，而不是隐藏。

【讨论】：

【解决方案2】：

你试过了吗：

<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

【讨论】：

是的，对我来说它看起来有点太冗长了..我更喜欢 Galdo 的回答。谢谢！