CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
el.severo
el.severo

Reputation: 2287

angularjs show or hide in nested repeaters

What's the best practice of toggling elements in nested ng-repeaters? I have the following angular template: 

<div>
    {{question.Description}}
    <div ng-repeat="answer in question.Answers">
        <a href="#" ng-click="answerQuestion(question, answer.ID, $index)">{{answer.Description}}</a>
        <div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
            <a href="#" ng-click="answerQuestion(question, qAnswer.ID, $index)">{{qAnswer.Description}}</a>
            <div ng-repeat="childAnswer in qAnswer.Answers"><!-- Hide/show here -->
                <a href="#" ng-click="answerQuestion(question, childAnswer.ID, $index)">{{childAnswer.Description}}</a>
            </div>
        </div>
    </div>
</div>

Edit:

I'd like to toggle based on click action

Upvotes: 0

Views: 502

Answers (2)

Stupidfrog
Stupidfrog

Reputation: 2102

<div>
    {{question.Description}}
    <div ng-repeat="answer in question.Answers">
        <a href="#" ng-click="answerQuestion(question, answer.ID, $index);answer.show=!answer.show">{{answer.Description}}</a>
        <div ng-repeat="qAnswer in answer.Questions" ng-show="answer.show"><!-- Hide/show here -->
            <a href="#" ng-click="answerQuestion(question, qAnswer.ID, $index);qAnswer.show=!qAnswer.show">{{qAnswer.Description}}</a>
            <div ng-repeat="childAnswer in qAnswer.Answers" ng-show="qAnswer.show"><!-- Hide/show here -->
                <a href="#" ng-click="answerQuestion(question, childAnswer.ID, $index)">{{childAnswer.Description}}</a>
            </div>
        </div>
    </div>
</div>

u need to set the object value to true or false, then angularjs will do the rest.

Upvotes: 1

haki
haki

Reputation: 9779

Try something like this, 

<div ng-init="items_display=[]">
    {{question.Description}}
    <div ng-repeat="answer in question.Answers">
        <a href="#" ng-click="answerQuestion(question, answer.ID, $index)">{{answer.Description}}</a>
        <div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
            <a href="#" ng-click="answerQuestion(question, qAnswer.ID, $index)" ng-click="items_display[$index] = !items_display[$index]">{{qAnswer.Description}}</a>
            <div ng-repeat="childAnswer in qAnswer.Answers" ng-show="items_display[$index]"><!-- Hide/show here -->
                <a href="#" ng-click="answerQuestion(question, childAnswer.ID, $index)">{{childAnswer.Description}}</a>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions