Question

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

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

Answer 1

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

$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

这使视图中的逻辑足迹变小，并允许您轻松地在多个元素上重用逻辑。

Answer 2

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

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

Answer 3

如果您希望将来的内容增长，可以使用模板或甚至所谓的条件指令将其包装到指令中：link

我应该在ng-if中重构ng-if的多个条件吗？

3 个答案: