javascript – 在AngularJs中动态显示/隐藏元素

2023年6月24日 161次阅读

我目前正在尝试使用Angular,我有一个问题,我有一些来自我的API的问题,其中一些问题依赖于其他问题,当它是一个单选按钮问题时会被检查为是,并且在属性中会有一个值ReliesOnID.

一旦我检查是,就需要显示依赖于当前检查的问题.

我来自jQuery背景,所以我会在reliesonid中传递函数,因为这将是问题编号,并执行类似$(‘#question’reliesonid’).show()的操作.

当我点击是,因为它们是重复时,如何让单选按钮显示另一个问题？多年来一直坚持这一点,所以非常感谢帮助.这是我的代码如下：

<div id="question{{question.Number}}" ng-repeat="question in questions" ng-class="question.ReliesOnID == null ? 'here' : 'hidden'">
    <div ng-if="question.QuestionTypeID == 3" >
        <div class="row">
            <div class="col-xs-12">
                <h5>{{question.Question}}</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <div class="col-xs-4"></div>
                <div class="col-xs-8">
                    <input type="radio" value="yes" name="{{question.Number}}"  /><label>Yes</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <div class="col-xs-4"></div>
                <div class="col-xs-8">
                    <input type="radio" value="no" name="{{question.Number}}" /><label>No</label>
                </div>
            </div>
        </div>
    </div>
    <div ng-if="question.QuestionTypeID == 1">
        <div class="row">
            <div class="col-xs-12">
                <h5>{{question.Question}}</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
</div>

编辑：数据结构是：

{
    "Active": true,
    "Comments": false,
    "DecimalPlaces": 0,
    "F": false,
    "FP": false,
    "Grouped": null,
    "ID": 20500,
    "Length": false,
    "MP": true,
    "Multiline": false,
    "Number": 45,
    "NumericOnly": false,
    "Optional": false,
    "Question": "How long ago was the treatment?",
    "QuestionID": 45,
    "QuestionSectionID": 2,
    "QuestionTypeID": 2,
    "QuestionnaireID": 298,
    "ReliesOnAnswer": true,
    "ReliesOnID": 44,
    "Weight": false
}

最佳答案 您需要使用ng-model作为答案,例如：

< input type =“radio”value =“yes”ng-model =“question.Answer”name =“{{question.Number}}”/>< label>是< / label>

然后在这个问题中你可以有子问题,只会使用ng-repeat.

ng-if =“question.subQuestions&& question.Answer！== undefined”ng-repeat =“subquestion in question.subQuestions”

这一切都取决于你的问题结构

编辑
根据你的结构,我会说你需要一个ng-if在你的ng-repeat中可以是这样的：
ng-if =“！question.ReliesOnID || wasAnswered(question.ReliesOnID)”

在wasAnswered函数中,您需要访问问题数组并过滤该ID并检查它是否已被回答并返回true或false

点赞