javascript - AngularJS:更改特定 ng-repeat 项的 ng-if 值？

Question

在大多数情况下，我是 Angular 和 JavaScript 的新手，所以这可能是一个一般的 JavaScript 问题:

我有一个通过 ng-repeat 创建的 div 列表，每个 div 都包含一个 ng-if="expanded == true"，通过单击按钮并运行以下函数使其变为真。

如何仅针对该 div 中的特定 ng-if 将 ng-if 值更改为 true？当前设置更改扩展为等于 true，然后显示 所有 ng-if Material 。

//HTML

    <div class="panel-body">
        <span ng-if="expanded == false">This property is missing several documents. Click <a ng-click="buyChecklist()">here</a> to complete this profile.</span>
    </div>  

    <ul class="list-group" ng-if="expanded == true">
        <li class="list-group-item text-right" ng-repeat="reqs in buyReqs">
            <span class="pull-left">{{reqs.name}}</span>
            <span><a class="btn btn-sm btn-primary" href="">Upload</a></span>
        </li>
    </ul>

//Controller.js 

    $scope.buyChecklist = function() {
        $scope.expanded = true; 
    }

Answer 1

由于您想要更改特定 div 的展开属性，这表明您实际上需要每个 div 的展开状态，而不仅仅是一个展开状态。所以你需要一个数组:

expanded = [false, false, false, false]; //one per div

然后在您的 html 模板中，您使用 ng-repeat 循环的当前索引检查特定 div 的扩展索引:

<span ng-if="expanded[$index]"> .. </span>

注意 $index 值的使用。您可以在 ng-repeat 循环中使用此变量。

documentation of ng-repeat在循环中提到这个和其他可用的变量(即 $first、$last、$even、$odd 等)