AngularJS子问题根据父问题答案隐藏和显示

时间:2019-01-28 10:05:51

标签: angularjs

enter image description here

需要隐藏子问题,直到选择了相应的父答案触发器。如果选择了该答案,则显示子问题。

我有一个对象数组,在这个数组中还有childrenQuestion个对象, 两者都按父ID与parentQuestionId

进行比较

赞:

childrenQuestion: {id: 3, createdById: 1, updatedById: 1, assessmentId: 1, points: 2, …}  
id: 2  
question: "Do you take medication for hypertension?"

HTML部分:

<div ng-repeat="ques in parentQuestion" ng-init="f = ques">
                    <div class="health-text" >
                        <p ng-if="ques.parentQuestionId == NULL">{{ques.questionIndex}}. <span ng-if="ques.parentQuestionId != NULL">{{ques.childrenQuestion.subIndex}}</span>{{ques.question}}</p>
                        <select ng-model="selectedAns" class="form-control from-health" ng-if="ques.parentQuestionId == NULL" ng-change="getSubQuestion(ques.childrenQuestion)">
                            <option ng-if="ans.questionId == ques.id" ng-repeat="ans in assessAnswers" value="ans.answer">
                                {{ans.answer}}
                            </option>
                        </select>
                    </div>
                    <ng-include  src="'challengeTemplate.html'"></ng-include>
                    <!--<div ng-attr-id="{{ 'object-' + ques.id }}"></div>-->
                </div>

<script type="text/ng-template" id="challengeTemplate.html">
    <div ng-repeat="childrenQues in childerenQuestions" ng-show="f.id == childrenQues.parentQuestionId">
        <div class="health-text">
            <p ng-if="childrenQues.parentQuestionId != NULL">{{childrenQues.question}}</p>
            <select ng-if="childrenQues.parentQuestionId != NULL" ng-model="selectedAns" class="form-control from-health" ng-change="getSubQuestion(childrenQues.childrenQuestion)">
                <option ng-if="ans.questionId == childrenQues.id" ng-repeat="ans in assessAnswers" value="ans.answer">
                    {{ans.answer}}
                </option>
            </select>
        </div>
    </div>
    <div class="borderBottom" ng-if="!f.childrenQuestion"></div>
</script>

0 个答案:

没有答案