AngularJS how to use btn-group or radio group in list

Question

I have a ng-repeat list, and I want use btn-group or radio group in every row, like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<tr ng-repeat="v_review_record in v_review_records_list track by $index">
                        <td>{{ $index + 1 }}</td>
                        <td><span>{{v_review_record.Name}}</span></td>
                        <td align="center">
                            <div class="btn-group">
                                <label class="btn btn-primary" type="radio" ng-model="v_review_record.Range_Access"  btn-radio="1" ng-checked="true">Agree</label>
                                <label class="btn btn-primary" type="radio" ng-model="v_review_record.Range_Access"  btn-radio="2">disagree</label>
                                <label class="btn btn-primary" type="radio" ng-model="v_review_record.Range_Access"  btn-radio="3">abstain</label>
                            </div>
                        </td>

                    </tr>

How do I bind the value in every row? or juse set a default value for every row, the v_review_record.Range_Access value should be 1,2,3. and also, when I submit, I want get the every row's radio records, how can I get that ? thank you~

Answer 1

It looks like you are trying to use a label as an input component. Simply moving some of those attributes to an input element without the label should make things work. I also replaced "btn-radio" attribute with "ng-value" because I'm not sure what btn-radio was doing, and ng-value allows for numeric values where value would just treat it as a string.

<label class="btn btn-primary">
    <input type="radio" ng-model="v_review_record.Range_Access" ng-value="1">
    Agree
</label>
<label class="btn btn-primary">
    <input type="radio" ng-model="v_review_record.Range_Access" ng-value="2">
    Disagree
</label>
<label class="btn btn-primary">
    <input type="radio" ng-model="v_review_record.Range_Access" ng-value="3">
    Abstain
</label>

That should bind the selection to Range_Access for each object within your array.

If you want to default then I would recommend doing it in a controller or service, but if you want to keep it in the template than adding ng-init to the containing element should work:

<div ng-init="v_review_record.Range_Access = 1" class="btn-group">