CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Roman Khrystynych
Roman Khrystynych

Reputation: 573

Conditional visibility within ng-repeat

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>

Upvotes: 0

Views: 211

Answers (1)

Aman Jain
Aman Jain

Reputation: 665

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>

Upvotes: 4

Related Questions