javascript - 作用域变量的改变不会影响 View

Question

我正在努力解决 AngularJS 问题。我在 ng-repeat 中有两个 HTML block ，并且希望在每个步骤中显示其中一个。

<div class="col-md-3" style="margin-top:80px" ng-init="checkFunction()">
    <div id="left_group_stage">
            <ul class="list-group" ng-if="started">
                    <li  class="list-group-item"> {{group_leaders[$index]}}</li>
                    <li  class="list-group-item"> {{group_runners[$index+1]}}</li>
            </ul>
            <ul class="list-group" ng-if="!started">
                    <li  class="list-group-item"> {{group_leaders[$index]}}</li>
                    <li  class="list-group-item"> {{group_runners[$index-1]}}</li>
            </ul>
    </div>
</div>

这些是我的 HTML 元素。

我每次都会调用 checkFunction 方法来更改每一步的起始值。

我在 Controller 中的功能是这样的。

$scope.started=true;
$scope.checkFunction=function(){
    $scope.started = !$scope.started;
    console.log($scope.started);
}

$scope.started 值随着每一步的变化而变化，我可以在控制台中看到它，但 ng-if 始终采用真实值。

我尝试了 $scope.$apply() 方法来强制在 $timeout 内更新 View ，但这也没有帮助。除了这部分之外，一切正常。

工作演示:https://plnkr.co/edit/lVSnbj?p=preview

Answer 1

怎么样

            <div class="col-md-3" style="margin-top: 80px"
                ng-init="checkFunction()">
                <div id="left_group_stage">
                    <ul class="list-group" ng-if="($index%2 === 0)">
                      <li class="list-group-item">List 1</li>
                        <li class="list-group-item">{{group_leaders[$index]}}</li>
                        <li class="list-group-item">{{group_runners[$index+1]}}</li>

                    </ul>
                    <ul class="list-group" ng-if="($index%2 !== 0)">
                      <li class="list-group-item">list 2</li>
                        <li class="list-group-item">{{group_leaders[$index]}}</li>
                        <li class="list-group-item">{{group_runners[$index-1]}}</li>

                    </ul>
                </div>
            </div>

您可以使用奇数和偶数来实现相同的行为 check this plunkr

奇数:ng-if="($index%2 !== 0)"

偶数:ng-if="($index%2 === 0)"

所以它交替发生。