检查ng-if

时间:2016-07-11 01:36:00

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

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

有没有更简单,更好的方法呢?

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

1 个答案:

答案 0 :(得分:1)

通常,角度表达式中的复杂逻辑是代码气味:

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

一般情况下,我会尽量避免布尔逻辑或其他任何表明我编写或代码审查的角度表达式复杂性的东西。相反,我建议您将逻辑提取到控制器方法中并直接调用控制器方法。这允许您也为它编写一个不错的单元测试。我建议的最终代码看起来像这样:

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

在控制器中:

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