Question

在嵌套的ng-repeater中切换元素的最佳做法是什么？我有以下角度模板：

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

编辑：

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

Answer 1

<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将完成剩下的工作。

Answer 2

尝试这样的事情，

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

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

2 个答案: