angularjs 在嵌套中继器中显示或隐藏

angularjs show or hide in nested repeaters

在嵌套的 ng-repeater 中切换元素的最佳做法是什么?我有以下 angular 模板:

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

编辑:

我想根据点击操作进行切换

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

您需要将对象值设置为 true 或 false,然后 angularjs 将完成剩下的工作。

尝试这样的事情,

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