AngularJS：更改特定ng-repeat项目的ng-if值？

Question

I am new to angular and javascript for the most part, so this may be a general javascript question:

I have a list of divs created through ng-repeat and each div contains an ng-if="expanded == true" that is made true by clicking a button and running the below function.

How do I change the ng-if value to true for only that specific ng-if inside that div? The current set up changes expanded to equal true and all of the ng-if material then shows.

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

Since you want to change an expanded property for a particular div, this is an indication that you actually need an expanded state per div and not just a single expanded state. So you need an array instead:

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

Then in your html template, you check the expanded index of the particular div using the current index of the ng-repeat loop:

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

Notice the use of the $index value. This variable is available to you within a ng-repeat loop.

The documentation of ng-repeat mentions this and other variables available to you within the loop (ie $first, $last, $even, $odd, etc.)