javascript - using ng-show on option select angularjs -
i want bind input field select option. if select option yes, input field should visible , if no, input field should hidden.
(function(){ var app = angular.module('spa',[ $rootscope.options = [ { id: 0, name: 'no' }, { id: 1, name: 'yes' } ] ]); }()); <form name="newdata" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newdata" novalidate> <div class="form-group item item-input item-select"> <div class="input-label"> booking fee paid </div> <select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name option in options track option.id" ng-init ="user.booking = options[0]" required> </select> </div> <div class="row" ng-show="user.booking.name == 'yes'"> <div class="col"> <div class="form-group item item-input"> <input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="amount"> </div> </div> </div> </form>
http://plnkr.co/edit/v0nrbteigo3lm1njru9a?p=preview
any appreciated
i suggest go through beginner tutorials @ angularjs.org.
here working sample you're asking for:
angular.module('app', []) .controller('sample', sample); function sample() { this.options = [{ id: 0, name: 'no' }, { id: 1, name: 'yes' }]; this.booking = this.options[0]; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="sample vm"> <select name="booking" ng-model="vm.booking" ng-options="option.name option in vm.options"></select> <pre>{{ vm.booking | json }}</pre> <input type="text" ng-show="vm.booking.name === 'yes'"/> </div>
Comments
Post a Comment