AngularJs ng显示当列表中的某一项在一行中为true时

Question

我有一个条件，基本上我想做的是，如果有一个bool设置为true，我想切换。但是bool附加在列表中的项目上。看看：

<div ng-repeat="step in progress.steps">
    <div ng-if="step.criticalError">
    </div>
</div>

很简单。

现在问题来了

向包含div的部分后退一步。我想处理这样的情况。。有3个div。一次只显示2个。决定这一点的因素是criticalError。这是一个要么全有要么全无的问题，所以如果一个人出现严重错误，那么所有步骤都会显示在顶部；否则，如果没有关键的，它们都会显示在下面。就像这样。

<div ng-show="containsCriticalError"></div>
<div>Always shows.</div>
<div ng-show="!containsCriticalError"></div>

或者你必须遍历列表，一旦满足条件，是否可以停止ng重复？

Answer 1

这个怎么样？

<div ng-show="!containsCriticalError">Always shows.</div>
<div>
    <div ng-repeat="step in progress.steps">
        <div ng-if="step.criticalError">
        </div>
    </div>
</div>
<div ng-show="containsCriticalError">Always shows.</div>

或者只是用CSS移动div？

Answer 2

可能有点时髦，但它可以

<div ng-repeat="step in progress.steps"
     ng-init="show = !step.criticalError && ($$prevSibling || {show: true}).show">
    <div ng-if="show">
    </div>
</div>

编辑：

我误解了这个问题。上述方法只显示第一个临界错误以上的步骤。

以下是我认为OP的要求：

<div ng-if="!show.v">Always shows...</div>
<div ng-init="show = {v: false}">
  <div ng-repeat="step in steps" 
       ng-init="show.v = step.criticalError || show.v">
  </div>  
</div>
<div ng-if="show.v">Always shows...</div>