Geek Answers Handbook

Show / hide elements dynamically in AngularJs

I am currently experimenting with Angular, and I have a problem, I have a set of questions from my API, some of them rely on others, which will be checked as “yes” when it asks a question with a switch and will make a difference in property ReliesOnID .

As soon as I check yes, a question that depends on the current one being checked should be displayed.

I come from the jQuery background, so I will execute the function passing in ReliesOnID , as this will be the question number and do something like $('#question' + reliesonid').show() .

How to make the switches display another question when I click yes, how do they repeat? Stuck on this for ages, so help is greatly appreciated. Here is my code below:

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

EDIT : data structure:
 { "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 }
+5
source share
4 answers

You need to use ng-model for your answers, for example:
<input type="radio" value="yes" ng-model="question.Answer" name="{{question.Number}}"/><label>Yes</label>

And then inside this question you may have questions and just use ng-repeat .

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

It will depend on your question structure, of course.

EDIT
Based on your structure, I would say that you need ng-if in your ng-repeat , which might look something like this:
ng-if="!question.ReliesOnID || wasAnswered(question.ReliesOnID)"

In the wasAnswered function wasAnswered you need access to the questions array and a filter for this identifier and check if it was answered and returned true or false

+1
source

Try this snippet.

Is this something you are looking for?

I tried to understand your question and created an example based on your JSON data structure.

Based on the choice of a specific question, it will only show the answer.

Edit-1: Applied Angular Element

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, the angular.element delegates for Angular's built-in subset of jQuery called jQuery lite or jqLite.

Additional Information angular.element

You can remove jQuery from the code if you want.

You can make the set / get class in Angular using angular.element, as shown 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>
+1
source

Edit : based on the comments below and the data structure provided:

If it is assumed that you want to iterate over only those questions that are parent and are not related to anything at startup. The linked should only be displayed when the relation is set to true:

So, replace ng-repeat with ng-repeat-start so that you can iterate over multiple divs, not just where ng-repeat is enabled.

In the <div> element add:

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

After that, make another <div> , below which your related questions will be displayed. It might look like this:

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

So, in your controller you need to add a function:

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

What you present as an option from JQUERY is possible in angular. However, there is an even simpler solution.

In your ng-repeat solution, you replace your radio input with something like:

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

And then below you add the following:

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

Everything will be inside your ng-repeat and should work correctly without additional logic in the controller.

0
source

I do not like to use ng-if, as this adds and removes elements in the DOM. Below is a link to ng-show / hide and a tutorial on how to use it on scotch.io.

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

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

So, a quick example will be lower, where the div element will be displayed only when the is_active variable is correct (this check can work with boolean or text checks). And this variable can be set in the controller or in the view. You do not need to switch this. Div will automatically shut off if the rating is not true; therefore, there is no need for ng-hide and ng-show on the same element unless you are checking multiple conditions.

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

More articles:


All Articles