Using AngularJS to show divs based on select value

Question

I'm trying to use an HTML select element's value to show or hide certain div tags with AngularJS. Here is my code:

<body ng-app="kiosk" id="ng-app" >
    <div class="page" ng-controller="kiosk-controller" ng-cloak="true">
        <section class="signin">

        <div class="intro">
            <h1 id="service-desk-name">{{servicedeskname}}</h1><br></br>
            <h4 id="welcome">{{welcome}}</h4>
        </div>

        <hr></hr>

        <form id="form" name="form">

            <div>
                <label>Do you have an ID?</label><br></br>
                <select type="select" 
                    ng-model="user.affiliated"
                    ng-required="true"
                    ng-options="opt as opt.name for opt in affiliate.affiliateOptions">
                    <option value="">--Select an answer--</option>
                </select>
            </div>

            <div ng-switch="user.affiliated">

            <div ng-switch-when="Yes"> 
                <!--><-->
            </div>
            <div ng-switch-when="No">
                <!--><-->
            </div>

            </div>

And here is the Javascript snippet:

var kiosk = angular.module('kiosk',[]);

kiosk.controller('kiosk-controller', ['$scope', function($scope, $user) {
    $scope.servicedeskname = 'Service Desk';
    $scope.welcome = 'Please sign in and a consultant will be with you shortly.';

    $scope.affiliate = {affiliateOptions:[]};
    $scope.affiliate.affiliateOptions = [
        { name: 'Yes' },
        { name: 'No' }
    ];
/*other stuff*/
};

I can't figure out the proper way to reference the select options in the HTML tags using ng directives. Unless it's not super clear, I want to be able to show one div if the select value is "Yes", and show another if the select value is "No".

Yousef · Accepted Answer · 2016-05-22 21:47:03Z

1

I think the switch statement you use need small modification

<div ng-switch on="user.affiliated">

            <div ng-switch-when="Yes"> 
                <!--><-->
            </div>
            <div ng-switch-when="No">
                <!--><-->
            </div>
</div>

check this ng-switch documentation for more help

answered May 22, 2016 at 21:47

Yousef

817 bronze badges

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

Comments

itamar · Accepted Answer · 2016-05-22 21:48:36Z

0

I believe you're looking for ng-show and ng-hide.

            <div ng-show="user.affiliated === 'Yes'"></div>
            <div ng-show="user.affiliated === 'No'"></div>

And try changing this line to this:

            ng-options="opt.name as opt.name for opt in affiliate.affiliateOptions">

edited May 22, 2016 at 21:48

answered May 22, 2016 at 21:35

itamar

3,9775 gold badges37 silver badges61 bronze badges

3 Comments

UnworthyToast Over a year ago

Yes, I have tried using that as well. I think the problem is that I don't know what to use on the left-hand side or what to use for the expression on the right-hand side to access the things I'm wanting to test against. I will try again and see if I was just doing something wrong.

UnworthyToast Over a year ago

It still is not working. The page loads with neither divs being shown, and regardless of which option I click, they both stay invisible.

itamar Over a year ago

@UnworthyToast the first thing in the statement of ng-options is the value the <select> gets. The second is what's displayed. The third is the actual object in the ng-option The last is the thing being iterated over. Try changing the line to what I put above.

Patrick · Accepted Answer · 2016-05-22 21:56:57Z

0

You forgot the name property in the switch statement.

-    <div ng-switch="user.affiliated">
+    <div ng-switch="user.affiliated.name">

As can be viewed in jsfiddle

answered May 22, 2016 at 21:56

Patrick

18k6 gold badges73 silver badges85 bronze badges

Comments

SergioGeeK7 · Accepted Answer · 2016-05-22 21:57:01Z

0

you just have a little mistake. you must have user.affiliated.name instead of user.affiliated

like this 

<div ng-switch="user.affiliated.name">

        <div ng-switch-when="Yes"> 
           yes
        </div>
        <div ng-switch-when="No">
            no
        </div>

    </div>

answered May 22, 2016 at 21:57

SergioGeeK7

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

Using AngularJS to show divs based on select value

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related