Search code examples
htmlangularjsangularjs-scope

Angular1.x- Access variable in nested ng-repeat from contorller


Currently I have a HTML page that contains nested ng-repeat and I have a variable called "isExpand" in the inner ng-repeat. I am wondering is there any ways to modify "isExpand" from the controller?

The following is a demo HTML layout:

<div ng-repeat="(key, value) in menus">
    <div> {{key}} </div>

    <div ng-repeat="item in value">
        <div > 
            <img class="title-col-img" ng-show="!isExpand" src="img/Close.png" ng-click="isExpand = true">
            <img class="title-col-img" ng-show="isExpand" src="img/Open.png" ng-click="checkContentChanged(item)">
            <div class="title-col-text" > {{item.name || 'empty'}} </div>
        </div>

        <div ng-click="isExpand = true">
            C<textarea ng-show="isExpand" ng-model="item.field1"> </textarea>
        </div>

        <div class="description-col col-md-4" ng-click="isExpand = true"> 
            <textarea ng-show="isExpand" ng-model="item.field2"> </textarea>
        </div>      
    </div>
</div>

Solution

  • Sure: make it a field of the current element of the array you're iterating on:

    <div ng-repeat="item in value">
        <div> 
            <img class="title-col-img" ng-show="!item.isExpanded" src="img/Close.png" ng-click="item.isExpanded = true">
    
        </div>
    
        ...
    </div>