Angularjs show divs based on selections from dropdown

Question

I have the following in my 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 you can see, i will have multiple rows of results in the table. Based on a selection from the dropdown, i ll need to display appropriate divs one below the other.ie if i select credit , i want to display a div containing the fields required to enter the details like the card number, expiry etc. When i select cheque from my second result in the table, i would like to show a div for that as well below the previous div with fields like cheque no . etc.

So if i select both as cheques , i would like to show two divs with cheque fields.

What would be the best approach to this scenario? Any references and help would be great!

Answer 1

Have an id for the options and show the div using ng-if based on the values from the select box as below, I hope this is what you expected if not let me know the specifics of your need.

Also change the select menu as below ,

<select ng-model="optionSelected" ng-options="detail.id as detail.name for detail in details ">

Populate your details variable in controller,

  details = {["id":1,"name":"Cash"],["id":2,"name":"Cheque"],["id":2,"name":"Debit"] ...}

    <tr ng-repeat="p in details">
         <td>{{ p.price | currency }}</td>
         <td ng-bind="{{ p.price }} * {{ p.quantity }} | currency"></td>
         <td>
              <select ng-model="optionSelected" class="form-control">
                  <option>Cash</option>
                  <option>Cheque</option>
                  <option>Debit</option>
                  <option>Credit</option>
              </select>
         </td>
    </tr>

    <div ng-if="optionSelected==2">
           Cheque number stuff and other fields ..
    </div>
    <div ng-if="optionSelected==3">
          Card number stuff and other fields ..
    </div>

Answer 2

If you bind values to the options and bind those to a model as 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 this case you could make a div show up conditioned on selectedOption as follows:

<div ng-if="selectedOption==='credit'">
    <!-- this only shows up if you selected credit
</div>