Show/Hide divs depend on dropdown select in AngularJS

Question

I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div

I have put together sample but its incomplete and needs to wire-up

http://jsfiddle.net/abuhamzah/nq1eyj1v/

Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.

<div ng-controller="MyCtrl">
   <div class="col-xs-12">
      <label class="col-xs-6 control-label">Type:</label>
      <div class="col-xs-6">
         <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
            <option ng-option value="Cash">Cash</option>
            <option ng-option value="Check">Check</option>
            <option ng-option value="Money Order">Money Order</option> 
         </select>
      </div>
   </div>
   <div class="col-xs-12" id="cash">
      <div >
         <label class="col-xs-6 control-label">Cash :</label>
         <div class="col-xs-6">
            <input type="number" class="form-control"  ng-model="payment.cash"    />
         </div>
      </div>
    </div>

    <div class="col-xs-12" id="check">
      <div >
         <label class="col-xs-6 control-label">check :</label>
         <div class="col-xs-6">
            <input type="number" class="form-control"  ng-model="payment.check"    />
         </div>
      </div>
    </div>

    <div class="col-xs-12" id="money_order">
      <div >
         <label class="col-xs-6 control-label">money_order :</label>
         <div class="col-xs-6">
            <input type="number" class="form-control"  ng-model="payment.money_order"    />
         </div>
      </div>
    </div>

</div>

//controller:

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


function MyCtrl($scope) {

  $scope.changeme = function() {
    alert('here');
  }
}

Kalhan · Accepted Answer · 2014-11-21 04:42:00Z

16

you didnt initialize as the angular app coz u missed the ng-app directive first

and this is the solution using ng-if

DEMO

<div ng-app="myApp" ng-controller="MyCtrl">  // initialize as a angular app

<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on.

answered Nov 21, 2014 at 4:42

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

1 Comment

Vignesh R Over a year ago

when page load payment object is Null/Undefined,then means i dont need that option based on ng-if condition,how to do give condition for object is NULL/Undefined ?

Collectives™ on Stack Overflow

Show/Hide divs depend on dropdown select in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related