CODEWITHSUNDEEP
javascriptphphtmlangularjs
konda
konda

Reputation: 185

Unable to select multiple radio options using ng-repeat

I'm working on an attendance module. Where I'm showing staff list from database using ng-repeat, with Present and Absent radio options in this, we can select only present or absent for particular staff.

Here is my staff list code:

<tbody data-ng-init="get_staff()">
    <tr ng-repeat="staff in pagedItems">
        <td data-title="Sl.No">{{ staff.slno }}</td>
        <td data-title="Staff Id">{{ staff.StaffId }}</td>
        <td data-title="Name">{{ staff.Name }}</td>
        <td data-title="Present"><input type="radio" name="attendance" id="attendance"  data-ng-model="staff.attendance" value="{{staff.StaffId}}"></td>
        <td data-title="Absent"><input type="radio"name="attendance" id="attendance"  data-ng-model="staff.attendance" value="{{staff.StaffId}}"></td>
    </tr>
</tbody>

<tfoot>
    <tr>
        <td colspan="7">
            <button type="button" class="btn btn-theme" data-ng-click="add_detail()">Next</button>
        </td>
    </tr>
</tfoot>

1) Unable to select multiple staff as present or absent
2) Unable to differentiate Present and absent after submitting
3) If i select only one radio option as present its not selected staff

Here is my AngularJS code 

$scope.add_detail=function()
{       
    var comArr = eval( $scope.pagedItems );
    var attendance=new Array();
    for( var i = 0; i < comArr.length; i++ )
    {
        attendance.push(comArr[i].attendance);
        alert(attendance);
    }
};

I'm newbie to AngularJS. Kindly guide me. Thanks in advance!

Upvotes: 0

Views: 90

Answers (1)

Pengyy
Pengyy

Reputation: 38171

In HTML5, radiobutton is grouped by it's name property. Here in ng-repeat, you just assign every radio button wit the same name, please assign different names for different radiobutton groups.

example(radiobutton grouped by each row of ng-repeat):

<tr ng-repeat="staff in pagedItems">
    <td data-title="Sl.No">{{ staff.slno }}</td>
    <td data-title="Staff Id">{{ staff.StaffId }}</td>
    <td data-title="Name">{{ staff.Name }}</td>
    <td data-title="Present"><input type="radio" name="{{'attendance' + $index}}" id="attendance"  data-ng-model="staff.attendance" value="{{staff.StaffId}}"></td>
    <td data-title="Absent"><input type="radio"name="{{'attendance' + $index}}" id="attendance"  data-ng-model="staff.attendance" value="{{staff.StaffId}}"></td>
</tr>

Upvotes: 1

Related Questions