时间戳

首页 > 解决方案 > 范围变量更改不影响视图

javascript - 范围变量更改不影响视图

问题描述

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

<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 方法来更改每一步的起始值。

我在控制器中的功能是这样的。

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

$scope.started 值随着我在控制台中看到的每一步而变化，但 ng-if 总是取真值。

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

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

标签： javascripthtmlangularjs

解决方案

怎么样

            <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>

odd您可以使用并检查此 plunkr来实现相同的行为even

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

甚至：ng-if="($index%2 === 0)"

所以它交替发生。

推荐阅读