CODEWITHSUNDEEP
javascripthtmlangularjshtml-selectng-show
UnworthyToast
UnworthyToast

Reputation: 835

Using AngularJS to show divs based on select value

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

Upvotes: 0

Views: 1594

Answers (4)

SergioGeeK7
SergioGeeK7

Reputation: 71

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>

Upvotes: 0

Patrick
Patrick

Reputation: 17973

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

Upvotes: 0

itamar
itamar

Reputation: 3967

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

Upvotes: 0

Yousef
Yousef

Reputation: 81

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

Upvotes: 1

Related Questions