Solved

Display content based on dropdown selected value in Angular

Posted on 2014-01-11
2
9,012 Views
Last Modified: 2014-01-14
Hi Experts,

I am newbie to Angular and have a requirement to show the content based on dropdown value in Angular.I have following dropdown  values

None: show no content
Name: Show "Name" content only
Address:Show "Address" content only
All: Show both "Name" and "Address" contents.

I have below code developed in Visual Studio editor which is  working fine (UI screenshots attached ) using Angular,Bootstrap and HTML5.

I need sample working code for my requirement.

<div class="container" >

  <div style="padding:50px;" ng-controller="samplecontroller">

 <div class="row">
     <label class="col-lg-2">
         Status</label>
     <div class="col-lg-5">
         <select class="input-sm">
             
             <option selected value="none">None</option>
             <option value="name">Name</option>
             <option value="address">Address</option>
             <option value="all">All</option>
         </select>
     </div>
 </div>
 </br>
    
  <div class="row">
         <label class="col-lg-2">
             Name</label>
         <div class="col-lg-5">
             <p class="form-group">
                 {{name}}</p>
         </div>

     </div>
 </br>
     
     <div class="row">
                <label class="col-lg-2">
                     Address</label>
                 <div class="col-lg-5">
                    <p class="form-group">
                        {{address}}</p>
                  </div>

       </div>

   </div>

 </div>

Open in new window


<script type="text/javascript">
        function samplecontroller($scope) {
            $scope.name = "FOO";
            $scope.address = "ADDRESS1";
      
        
        }

Open in new window


Thanks in Advance
image1.JPG
image2.JPG
0
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 39773374
Test page : http://jsfiddle.net/vKfjg/

<div class="container" ng-app>
    <div style="padding:50px;" ng-controller="samplecontroller">
        <div class="row">
            <label class="col-lg-2"> Status</label>
            <div class="col-lg-5">
                <select class="input-sm" ng-model="state" ng-options="s.value for s in status"></select>
            </div>
        </div>
        <br/>
        <div class="row" ng-hide="state.value!='name'&&state.value!='all'">
            <label class="col-lg-2">Name</label>
            <div class="col-lg-5">
                <p class="form-group">{{name}}</p>
            </div>
        </div>
        <br/>
        <div class="row" ng-hide="state.value!='address'&&state.value!='all'">
            <label class="col-lg-2">Address</label>
            <div class="col-lg-5">
                <p class="form-group">{{address}}</p>
            </div>
        </div>
    </div>
</div>

Open in new window


function samplecontroller($scope) {
    $scope.status = [
        {value:'none',text:'none'},
        {value:'name',text:'Name'},
        {value:'address',text:'Address'},
        {value:'all',text:'All'}
    ];
    $scope.state = $scope.status[0];
    $scope.name = "FOO";
    $scope.address = "ADDRESS1";
}

Open in new window

0
 

Author Comment

by:ksd123
ID: 39775974
Thank you. I need "text" values in dropdown so I have changed below code from s.value to s.text

 <select class="input-sm" ng-model="state" ng-options="s.text for s in status"></select>

Open in new window


In reality, I have 6 dropdown values and 5 divs in a page layout and based on selection  I am displaying divs (none,1,2,3 etc). So the above approach (using ng-hide declaratively on each div)  is the best practice in angular ?

Thanks in Advance
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html5 1 45
isNaN issue on the Table input text 2 41
How does GeoJson relates to Leaflet and Mapbox? 4 49
Ajax success not firing alert 6 42
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question