javascript - Angularjs 根据下拉列表中的选择显示 div

Question

我的 angularjs 应用程序中有以下内容:

<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>

如您所见，表中将有多行结果。根据下拉列表中的选择，我需要在另一个下面显示适当的 div，即如果我选择credit ，我想显示一个 div，其中包含输入卡号、有效期等详细信息所需的字段。当我选择 cheque 时从表中的第二个结果来看，我想在前一个 div 下方显示一个 div，其中包含 check no 等字段。等等

因此，如果我将两者都选择为 cheques ，我想显示两个带有检查字段的 div。

解决这种情况的最佳方法是什么？任何引用和帮助都会很棒!

Answer 1

为选项提供id，并根据下面选择框中的值使用 ng-if 显示 div，我希望这是您所期望的，如果不要让我知道您的具体需求。

同时更改选择菜单，如下所示，

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

在 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>