JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div ng-app="myApp" 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>
    {{ payment.cash }}
   <div class="col-xs-12" id="cash" ng-if="payment.type == '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" ng-if="payment.type == '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" ng-if="payment.type == '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>

JavaScript

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

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