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>

score 4 · Accepted Answer · answered Dec 30 '15 at 17:48

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 '15 at 17:48

Aman Jain

655
5
17

what if I'm using this ng-repeat to build a large question set? each question might have different visibility dependencies – Roman Khrystynych Dec 30 '15 at 18:02
1

You can add n number of filters on the base of different models. Please review this answer http://stackoverflow.com/a/13216282/3226814 for moreinformation – Aman Jain Dec 30 '15 at 18:05

Conditional visibility within ng-repeat

1 Answers1