Conditional visibility within ng-repeat

Question

I'm trying to make conditional visibility for questions within an ng-repeat based on the answer of other questions. If user is from Canada then show provinces, if user is from USA then show states. My current attempt is something like this within ng-show:

survey[question.otherquestionToTest - 1].answer == question.testedCondition

I tried to write it in descriptive terms to explain what I am trying to do. I'm still getting familiar with Angular and I'm not sure if there is a better way to get this done. Can anyone suggest any other alternatives if this seems to be an inefficient way of handling this problem.

Below are examples of my controller and html.

CONTROLLER

angular.module('myApp')
.controller('UserInfoCtrl', function ($scope) {

$scope.userInfo = {
    userSurvey: [
        { // Question 8
            question: 'What country do you live in?',
            answer: '',
            options: [
                'Canada',
                'USA'
            ]
        },{ // Question 9
            visibilityDependentOnQuestion: 8,
            visibilityCondition: 'Canada',
            question: 'What province do you live in?',
            answer: '',
            options: [
                'Alberta',
                'British Columbia',
                'Manitoba',
                'New Brunswick'
            ]
        },{ // Question 10
            visibilityDependentOnQuestion: 8,
            visibilityCondition: 'USA',
            question: 'What state do you live in?',
            answer: '',
            options: [
                'Alabama',
                'Alaska',
                'Arizona',
                'Arkansas'
            ]
        }
    ]
};
});

VIEW

<form class="form-horizontal">
    <div class="form-group ng-hide" 
         ng-repeat="(key, userInquery) in userInfo.userSurvey as survey" 
         ng-show="survey[userInquery.visibilityDependentOnQuestion - 1].answer == userInquery.visibilityCondition">
        <label class="col-sm-4 control-label text-right">{{userInquery.question}}</label>
        <div class="col-sm-4">
            <select class="form-control" ng-model="userInquery.answer">
                <option ng-repeat="option in userInquery.options">{{option}}</option>
            </select>
        </div>
    </div>
</form>

Aman Jain · Accepted Answer · 2015-12-30 17:48:01Z

4

It is better to filter result than hiding it. Use filters instead. You need to add a filter by date while populating it.

Here, you can apply filter by visibilityCondition.

Something like this

<div ng-repeat="(key, userInquery) in userInfo.userSurvey as survey | filter:USA"></div>

answered Dec 30, 2015 at 17:48

Aman Jain

6675 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Khrystynych Over a year ago

what if I'm using this ng-repeat to build a large question set? each question might have different visibility dependencies

Aman Jain Over a year ago

You can add n number of filters on the base of different models. Please review this answer stackoverflow.com/a/13216282/3226814 for moreinformation

Collectives™ on Stack Overflow

Conditional visibility within ng-repeat

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related