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

Question

我目前正在尝试使用 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
}

Answer 1

您需要使用ng-model 来回答您的问题，例如：
<input type="radio" value="yes" ng-model="question.Answer" name="{{question.Number}}"/><label>Yes</label>

然后在该问题中，您可以有子问题，只需使用ng-repeat。

ng-if="question.subQuestions && question.Answer !== undefined" ng-repeat="subquestion in question.subQuestions"

这当然取决于你的问题结构

编辑
根据您的结构，我会说您需要在您的 ng-repeat 中添加一个 ng-if，它可以是这样的：
ng-if="!question.ReliesOnID || wasAnswered(question.ReliesOnID)"

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

Answer 2

试试这个 sn-p。

你在找什么东西吗？

我试图理解您的问题，并根据您的 JSON 数据结构创建了一个示例。

根据特定问题的选择，它只会显示它的答案。

Edit-1：应用角度元素

如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 将委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或 jqLit​​e。

更多信息angular.element

如果你愿意，你可以从代码中去掉 jQuery。

您可以使用 angular.element 在 Angular 中设置/获取类，如 over here 所示。

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.questions = [
    {
    "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": 10,
    "Weight": false,
    "Answer": '2 years ago'
    },
    {
    "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": "Who is God of cricket?",
    "QuestionID": 45,
    "QuestionSectionID": 2,
    "QuestionTypeID": 2,
    "QuestionnaireID": 298,
    "ReliesOnAnswer": true,
    "ReliesOnID": 20,
    "Weight": false,
    "Answer": 'Sachin Tendulkar'
    }
  ]
  
  //Function when radio button clicked
  $scope.flagChange = function(){
    var reliesId = angular.element(event.target).attr('data-reli-id');
    var value = angular.element(event.target).attr('data-value');
    //Based on the condition it will show / hide the respective element
    if(value == "yes")
    {
      $('#'+reliesId).removeClass('hide').addClass('show');
    }
    else
    {
      $('#'+reliesId).removeClass('show').addClass('hide');
    }
  }
}]);

.show
{
  display: block; 
}
.hide
{
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
  <div ng-repeat="question in questions track by $index">
        {{question.Question}}
        <input type="radio" name="Flag_{{$index}}" ng-click="flagChange($event)" data-value="yes" data-reli-id='{{question.ReliesOnID}}' />Yes
        <input type="radio" name="Flag_{{$index}}" ng-click="flagChange($event)" data-value="no" data-reli-id='{{question.ReliesOnID}}' />No
        <span ng-show="custom_$index">{{question.Answer}}</span>
    <br/>
        <div id="{{question.ReliesOnID}}" class="hide">
            Question based on ReliesOnID : {{question.ReliesOnID}}
        </div>
    <br/>
  </div> 
</div>

Answer 3

我不喜欢使用 ng-if，因为它会在 DOM 中添加和删除元素。下面是 ng-show/hide 的链接以及如何在 scotch.io 上使用它的教程。

https://docs.angularjs.org/api/ng/directive/ngShow

https://scotch.io/tutorials/how-to-use-ngshow-and-nghide

下面是一个简单的示例，其中 div 元素仅在变量 is_active 为 true 时才会显示（此检查可以与布尔值或文本检查一起使用）。并且这个变量可以在控制器或视图中设置。你不需要切换这个。当评估不正确时，div会自动隐藏；所以不需要在同一个元素上使用 ng-hide 和 ng-show，除非您要检查多个条件。

<input type="radio" ng-model="question.subQuestion" value="true"> <br/>
 <input type="radio" ng-model="question.subQuestion" value="false"> <br/>

 <div ng-show="question.subQuestion">
     // Your subQuestion code comes here
 </div>

Answer 4

编辑：基于下面的 cmets 和提供的数据结构：

如果假设您只想迭代那些是父级的问题，并且在开始时与任何事情都没有关系。仅当 ratio 设置为 true 时才显示相关：

因此，将 yourng-repeat 替换为 ng-repeat-start，这将使您能够迭代多个 div，而不仅仅是在 ng-repeat 所在的位置。

在您的 <div> 元素中添加：

 <input type="radio" ng-model="question.subQuestion" value="true"> <br/>
 <input type="radio" ng-model="question.subQuestion" value="false"> <br/>

然后在下方创建另一个<div>，它将显示您的相关问题。它可能看起来像：

// ng-if here to display only when radio was set to true
<div class="relatedQuestion" ng-repeat-end ng-if="question.subQuestion">
  <div ng-repeat="relatedQ in getRelatedQuestion(question.Number)">
    // Here you display your related questions
  </div>
</div>

所以在你的控制器中你需要添加一个函数：

function getRelatedQuestion(number) {
  // logic comes here which filter question
  // which have property relatedOnId === number;
  // it should be an array of objects to iteratee over it.
}

---

您作为 JQUERY 的一个选项呈现的内容也可以是 Angular 的。 然而，还有更简单的解决方案。

在您的 ng-repeat 解决方案中，您将无线电输入替换为以下内容：

 <input type="radio" ng-model="question.subQuestion" value="true"> <br/>
 <input type="radio" ng-model="question.subQuestion" value="false"> <br/>

然后在下面添加：

 <div ng-if="question.subQuestion">
     // Your subQuestion code comes here
 </div>

一切都将在您的 ng-repeat 中，并且应该可以正常工作，而无需控制器中的其他逻辑。