我应该重构 angularjs 中 ng-if 的多个条件吗?

Should I refactor multiple conditions on ng-if in angularjs?

本文关键字：条件 重构 angularjs ng-if 我应该      更新时间：2023-09-26

我有这段代码，我想知道是否有更好的风格来编写它，以便视图中的逻辑更少。

<span ng-if="status == 'state1' || status == 'state2'">Foobar</span>
<span ng-if="status == 'state3'">Baz</span>

是的，我认为重构是明智的。 你的例子很简单，但很容易想象有更多的条件。 当许多元素具有复杂的显示条件时，我做了这样的事情：

$scope.render = {
  foobar: function() {
    return $scope.status == 'state1' || $scope.status == 'state2'
  },
  baz: function() {
    return $scope.status == 'state3'
  }
}

那么视图中的用法是：

<span ng-if="render.foobar()">Foobar</span>
<span ng-if="render.baz()">Baz</span>

演示：http://plnkr.co/lv4w9dLN8oN0bBF23VKp

这样可以保持视图中的逻辑占用空间较小，并允许您轻松地在多个元素上重用逻辑。

不确定这是否更好，但这里有一个使用 ngSwitch 的选项。 它确实删除了一些逻辑（假设您只有这三种状态）：

<div ng-switch on="status">
    <span ng-switch-when="state3">Baz</span>
    <span ng-switch-default>Foobar</span>
</div>

如果你预计你的内容将来会增长，你可以用模板甚至所谓的条件指令将其包装成指令：链接

相关文章：