Show / hide divs depends on the dropdown menu in AngularJS

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'); } } 
+5
source share
1 answer

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

and this 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. 
+13
source

Source: https://habr.com/ru/post/1207364/


All Articles