Calvin Calvin - 2 months ago 6
AngularJS Question

Angular, ng-repeat to create multiple sets of radio buttons

I am trying to create multiple sets radio input options with ng-repeat, however, it seems that when the elements are being created, they are not given the unique ID I intend (

"id":"1", "id":"2" or "id":"3"
) instead they all get named specifically
'fee[{{ record.id }}]'
, this results in only the final radio set having a check. What am I missing here?

HTML:

<div ng-app="app" ng-controller="fee_control">
<div ng-repeat="record in fees" >
{{ record.description }} :
<input type="text" value="{{ record.amount }}">
Active:
<input type="radio" name="fee[{{ record.id }}]" value="{{ record.amount }}" checked />
Inactive:
<input type="radio" name="fee[{{ record.id }}]" value="0" />
</div>
</div>


Javascript:

var app = angular.module('app', []);
app.controller('fee_control', function($scope) {
$scope.fees = [
{"id":"1","amount":"5.00","description":"Approved"},
{"id":"2","amount":"2.00","description":"Authorized"},
{"id":"3","amount":"2.00","description":"Settled"}
];
});

Answer

Try this

 <div ng-repeat="record in fees" >
   {{ record.description }} : 
   <input type="text" value="{{ record.amount }}">
   Active: 
   <input type="radio" name="fee[{{ record.id }}]" value="{{record.amount }}" ng-checked="true" />
   Inactive: 
   <input type="radio" name="fee[{{ record.id }}]" value="0" />
</div>

use ng-checked instead of checked :) thanks