Select Radio buttons from multiple form - angularjs

Question

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?

Answer 1

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.

Answer 2

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>