Issue
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~
Solution
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">
Answered By - user752
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.