【问题标题】:checking multiple condition in ng-if检查 ng-if 中的多个条件
【发布时间】:2016-07-11 01:36:00
【问题描述】:

我需要检查 ng-if 中的 4 个条件,它们是布尔条件。如果其中任何一个为真,我需要显示一些 div。

请问有没有更简单更好的方法呢?

<div ng-if="ctrl.survivor || ctrl.doctor || ctrl.patient || ctrl.beneficiary">
<div ng-bind-html=" {{ myContent }}">
</div>
</div>

【问题讨论】:

  • 您可以将逻辑放在控制器的函数中,但没有更简单的方法来表示此逻辑;该函数看起来基本相同。
  • @Claies:谢谢,这是正确的语法吗?我是 Angular 的新手。我还没有测试这段代码。我现在就去做。但这一切看起来好吗?是的,我只在控制器中设置了这个
  • 同意@Claies,另外,除了上面提到的这四种之外,还有哪些其他类型的用户角色?您可以通过使用 Not if 的想法来简化逻辑。
  • 2 件事:1st: ng-if 的语法是正确的.. 我不知道你的结构如何,但假设你有 5 种 [幸存者,医生、病人、受益人、任何人],所以你可以简单地使用 ng-hide="ctrl.anyone" 而不是 ng-if (所以只有当它是 anyone 时才会隐藏,注意减少)。 2nd.ng-bind-html,不正确,你应该简单写ng-bind-html="myContent"(没有插值{})。
  • @developer033:谢谢,我做了和你说的类似的,它有效:) 干杯

标签: angularjs html angularjs-directive ng-show angular-ng-if


【解决方案1】:

一般来说,角度表达式内部的复杂逻辑是代码异味:

  • 难以阅读
  • 难以调试
  • 很难测试

一般来说,我会尽量避免使用布尔逻辑或任何其他在我编写的角度表达式或代码审查中表明复杂性的东西。相反,我建议您将逻辑提取到控制器方法中并直接调用控制器方法。这使您还可以为它编写一个很好的单元测试。我推荐的最终代码如下所示:

<div ng-if="ctrl.isApplicable()">
  <div ng-bind-html=" {{ myContent }}"></div>
</div>

在控制器中:

class Ctrl {
  ...    
  isApplicable() {
    return survivor || ctrl.doctor || ctrl.patient || ctrl.beneficiary;
  }
  ...
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-16
    • 2015-04-26
    • 2019-03-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多