从多个表单中选择单选按钮

Question

我在同一页面上有多个表单。该表格包含每月，每季度的产品名称及其价格。我使用无线电btn来选择月度或季度的价格。但是，如果用户想要订购多个产品，他/她如何为该产品选择无线电btn。任何解决方案？

Answer 1

HTML单选按钮正在使用其名称。因此，如果您需要为每个产品单独设置单选按钮，则每个单选按钮必须具有不同的名称。例如：

<!-- Product 1 -->
<input type="radio" name="product-1" value="monthly" /> Monthly<br/>
<input type="radio" name="product-1" value="quarterly" /> Quarterly<br/>


<!-- Product 2 -->
<input type="radio" name="product-2" value="monthly" /> Monthly<br/>
<input type="radio" name="product-2" value="quarterly" /> Quarterly<br/>

如果您想要多个选择，我建议您使用复选框而不是单选按钮。

<!-- Product 1 -->
<input type="checkbox" name="product-1" value="monthly" /> Monthly<br/>
<input type="checkbox" name="product-1" value="quarterly" /> Quarterly<br/>


<!-- Product 2 -->
<input type="checkbox" name="product-2" value="monthly" /> Monthly<br/>
<input type="checkbox" name="product-2" value="quarterly" /> Quarterly<br/>

使用CSS可以隐藏复选框并设置样式，使它们看起来像单选按钮。

Answer 2

您也可以通过产品上的复选框来执行此操作，这将有助于您选择主要产品，例如：

  

产品A和每月和产品B和季度

要获取唯一名称，您可以在{{$index}}中使用ng-repeat作为此示例

var app = angular.module("app", []);

app.controller("ctrl", function($scope, $filter) {
    $scope.products = [
       {monthly: 8000, quarterly: 18000},
       {monthly: 9000, quarterly: 28000},
       {monthly: 10000, quarterly: 38000},
       {monthly: 11000, quarterly: 48000},
       {monthly: 12000, quarterly: 58000}
    ];
    
    $scope.get = function() {
      var selectedProducts = $filter('filter')($scope.products, {selected: true});
      console.log(selectedProducts)
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h3>multiple selecte with radio mode</h3>

  <ul>
    <li ng-repeat="product in products">
        <input type="checkbox" ng-model="product.selected">

        <label>
          monthly: {{product.monthly}}
          <input type="radio" name="type_{{$index}}" ng-value="0" ng-model="product.type">
        </label>
        <label>
          quarterly: {{product.quarterly}}
          <input type="radio" name="type_{{$index}}" ng-value="1" ng-model="product.type">
        </label>
    </li>
  </ul>
  <hr>
  <h3>multiple selecte with checkbox mode</h3>
  <ul>
    <li ng-repeat="product in products">
        <input type="checkbox" ng-model="product.selected">

        <label>
          monthly: {{product.monthly}}
          <input type="checkbox" name="type_{{$index}}" ng-model="product.monthlySelected">
        </label>
        <label>
          quarterly: {{product.quarterly}}
          <input type="checkbox" name="type_{{$index}}" ng-model="product.quarterlySelected">
        </label>
    </li>
  </ul>
  
  
  <button ng-click="get()">get products</button>

</div>