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

时间：2016-09-13 11:25:21

标签： javascript jquery angularjs ng-show ng-hide

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

4 个答案:

答案 0 :(得分：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-if中需要ng-repeat，这可能是这样的：
ng-if="!question.ReliesOnID || wasAnswered(question.ReliesOnID)"

在wasAnswered功能中，您需要访问questions数组并过滤该ID并检查其是否已得到回复并返回true或false

答案 1 :(得分：1)

试试这个代码段。

这是什么，你在寻找？

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

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

编辑-1：应用角色元素

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

更多信息angular.element

如果需要，你可以从代码中删除jQuery。

你可以使用angular.element来完成Angular中的set / get类，如图所示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>

答案 2 :(得分：0)

修改：根据以下评论和提供的数据结构：

如果假设您想要迭代那些父项并且在开始时与任何事物无关的问题。仅当比率设置为true时才应显示相关：

请将ng-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中作为选项提供的内容也可以是有角度的。 然而，有更多的解决方案。

在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内，并且无需控制器中的其他逻辑即可正常工作。

答案 3 :(得分：0)

我不喜欢使用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>
相关问题
最新问题