I am trying to show a div depending on what is selected in the dropdown. For example, if the user selects "Cash" in the list "Money div" or the user selects "Check" from the list, select "Check div
I have collected a sample, but it is incomplete and must connect to
http://jsfiddle.net/abuhamzah/nq1eyj1v/
Also, when the user changes the selection, I would also like to remove the previous selection, so when the user returns 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'); } }
source share