Question

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

如您所见，我将在表格中有多行结果。根据下拉列表中的选择，我需要在另一个下方显示适当的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 ">

在控制器中填充您的详细信息变量，

  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

如果将值绑定到选项并将它们绑定到模型，如：

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

在这种情况下，你可以按照selectedOption条件进行div显示，如下所示：

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

Angularjs根据下拉列表中的选项显示div

2 个答案: