How to show/hide two different div on dropdown select in angular js?

Question

I have two different div and base on drop down select if yes general-1 div show and general-2 div hide, if select No general-2 div show and general-1 div hide.

please provide me right solution using angular js my sample code is below look like.

I am newer in angular Js so please provide me easy way to solve out this features for make more reach this code.

   <html>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="col-md-12" style="padding:5px">
    <div class="col-md-12">
        <label class="label-head">Phd Guide</label>
        <select name="phd_guide" class="form-control" required ng-model="myVar">
            <option value="">---Choose Phd Guide---</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</div>


<div class="col-md-12" style="padding:5px" id="general-1" ng-hide="myVar">
    <div class="col-md-3">
        <label class="label-head">Guide since</label>
        <input type="text" class="form-control" name="guide_since" placeholder="Guide Since" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Present Phd Scholars</label>
        <input type="text" class="form-control" name="phd_scholar" placeholder="Phd Scholar" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Phd Scholars Guided</label>
        <input type="text" class="form-control" name="phd_scholar_guide" placeholder="Phd Scholars Guided" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Subject Trust Area Involved</label>
        <input type="text" class="form-control" name="sub_trust_area_inv" placeholder="Subject trust area involved" required>
    </div>

</div>

<div class="col-md-12" style="padding:5px" id="general-2">
    <div class="col-md-2">
        <label class="label-head">H index Scopus</label>
        <input type="text" class="form-control" name="guide_since" placeholder="H index Scopus" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">I10 Index Scopus</label>
        <input type="text" class="form-control" name="i10_index_of_scholar" placeholder="I10 Index Scopus" required>
    </div>
    <div class="col-md-2">
        <label class="label-head">H-Index Google Scholar</label>
        <input type="text" class="form-control" name="h_index_of_google_scholar" placeholder="H-Index Google Scholar" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">I10-index Google Scholar</label>
        <input type="text" class="form-control" name="i10_index_of_google_scholar" placeholder="I10-index Google Scholar" required>
    </div>
    <div class="col-md-2">
        <label class="label-head">Link of Google Scholar</label>
        <input type="text" class="form-control" name="link_of_google_scholar" placeholder="Link of Google Scholar" required>
    </div>

</div>


</body>

</html>

so you want someone to do it for you?? Did you try anything from your side apart from this html? If yes then post that too — Saurabh Agrawal
– Saurabh Agrawal, Commented Nov 7, 2017 at 5:39

jitender · Accepted Answer · 2017-11-07 05:55:36Z

You can simple use ng-if

var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
   $scope.myVar='yes';
})

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 </head>
<body ng-app="myApp" ng-controller="myCtrl">

   
    <div class="col-md-12" style="padding:5px">
        <div class="col-md-12">
            <label class="label-head">Phd Guide</label>
            <select name="phd_guide" class="form-control" required ng-model="myVar">
                <option value="">---Choose Phd Guide---</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>


    <div ng-if="myVar === 'yes'" class="col-md-12" style="padding:5px" id="general-1" >
        <div class="col-md-3">
            <label class="label-head">Guide since</label>
            <input type="text" class="form-control" name="guide_since" placeholder="Guide Since" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Present Phd Scholars</label>
            <input type="text" class="form-control" name="phd_scholar" placeholder="Phd Scholar" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Phd Scholars Guided</label>
            <input type="text" class="form-control" name="phd_scholar_guide" placeholder="Phd Scholars Guided" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Subject Trust Area Involved</label>
            <input type="text" class="form-control" name="sub_trust_area_inv" placeholder="Subject trust area involved" required>
        </div>

    </div>

    <div ng-if="myVar === 'no'" class="col-md-12" style="padding:5px" id="general-2">
        <div class="col-md-2">
            <label class="label-head">H index Scopus</label>
            <input type="text" class="form-control" name="guide_since" placeholder="H index Scopus" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">I10 Index Scopus</label>
            <input type="text" class="form-control" name="i10_index_of_scholar" placeholder="I10 Index Scopus" required>
        </div>
        <div class="col-md-2">
            <label class="label-head">H-Index Google Scholar</label>
            <input type="text" class="form-control" name="h_index_of_google_scholar" placeholder="H-Index Google Scholar" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">I10-index Google Scholar</label>
            <input type="text" class="form-control" name="i10_index_of_google_scholar" placeholder="I10-index Google Scholar" required>
        </div>
        <div class="col-md-2">
            <label class="label-head">Link of Google Scholar</label>
            <input type="text" class="form-control" name="link_of_google_scholar" placeholder="Link of Google Scholar" required>
        </div>

    </div>


</body>

</html>

after 1min i will able to accept ur answer, In this code can i set default selected general-1 div

amanpurohit · Accepted Answer · 2017-11-07 05:56:59Z

1

I have created a plnkr with working solution. You can use ng-hide = 'myVar==='no' and ng-hide = 'myVar==='yes' for your general-1 and general-2 divs respectively. Everything else seems perfect.

Plnkr link : https://plnkr.co/edit/rAJMJEFRTFi2Oc2dNZQY?p=preview

answered Nov 7, 2017 at 5:56

amanpurohit

1,29611 silver badges20 bronze badges

2 Comments

Axit Sompura Over a year ago

default selected shold be only one required in ur code both selected

amanpurohit Over a year ago

Ahh!! just read your comments on previous answer. I have updated my plnkr with default selected as 'yes'.

Usman · Accepted Answer · 2019-11-28 03:29:43Z

0

I am using Angular 5 , you can use this approach like :

Html code:

(for select box) 


  Select Source Type:
               <select [(ngModel)]="selectAccountType" 
               (change)='onOptionsSelected($event)'style="width: 100px">            
<option id="VALUEA"  value="VALUEA">VALUEA</option>
<option id="VALUEB"  value="VALUEB">VALUEB</option>
               </select>

Div code:
 <div  *ngIf="showData===true">
<p> Showing DIV </p>
</div>

Type script code:

onOptionsSelected(event){
  let value = event.target.value;
  this.sourceValue=value;
  if(this.sourceValue==='VALUEA')
  {
this.showData=true;
  }
  else{
    this.showData=false;
  }
}

answered Nov 28, 2019 at 3:29

Usman

5755 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to show/hide two different div on dropdown select in angular js?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related