javascript - Angularjs show divs based on selections from dropdown -
i have following in angularjs app:
<tr ng-repeat="p in details"> <td>{{ p.price | currency }}</td> <td ng-bind="{{ p.price }} * {{ p.quantity }} | currency"></td> <td> <select class="form-control"> <option>cash</option> <option>cheque</option> <option>debit</option> <option>credit</option> </select> </td> </tr>
as can see, have multiple rows of results in table. based on selection dropdown, ll need display appropriate divs 1 below other.i.e. if select credit
, want display div containing fields required enter details card number, expiry etc. when select cheque
second result in table, show div below previous div fields cheque no. etc.
so if select both cheques
, show 2 divs cheque fields.
what best approach scenario? references , great!
if bind values options , bind model in:
<select ng-model="selectedoption" class="form-control"> <option value="cash">cash</option> <option value="checkque">cheque</option> <option value="debit">debit</option> <option value="credit">credit</option> </select>
in case make div show conditioned on selectedoption
follows:
<div ng-if="selectedoption==='credit'"> <!-- shows if selected credit </div>
Comments
Post a Comment