CODEWITHSUNDEEP
angularjs
Priyanka Jain
Priyanka Jain

Reputation: 1

Select Radio buttons from multiple form

Am having multiple form on same page . That form contains product name and their prices for monthly ,quarterly. i used radio btn to select prices for either monthly or quarterly. But if user wants to subscribe for multiple product , how he/she can select radio btn for that product.Any solution?enter image description here

Upvotes: 0

Views: 754

Answers (2)

Maher
Maher

Reputation: 2547

You can do it by checkbox on products too, this will helps you to select main product with one of option, for example:

product A and monthly And product B and quarterly

to get unique name you can use {{$index}} in ng-repeat as this sample

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>

Upvotes: 0

MatejG
MatejG

Reputation: 1423

HTML radio buttons are working with their names. So in case you want separate radio buttons for each product, each of your radio buttons has to have different name. So for example:

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

In case you want multiple selection, I suggest you to use checkbox instead of radio buttons.

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

With CSS it's possible to hide checkbox and style it so they look like radio buttons.

Upvotes: 1

Related Questions