javascript - 无法使用 ng-repeat 选择多个单选选项

Question

我正在开发一个考勤模块。当我使用 ng-repeat 显示数据库中的员工列表时，其中包含 Present 和 Absent 单选选项，我们只能选择特定员工的出席或缺席。

这是我的员工名单代码:

<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) 无法选择多名员工在场或缺席
2) 提交后无法区分出席和缺席
3)如果我只选择一个单选选项，则显示其未选择的人员

这是我的 AngularJS 代码

$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);
    }
};

我是 AngularJS 的新手。请指导我。提前致谢!

Answer 1

在 HTML5 中，radiobutton 按其 name 属性进行分组。在ng-repeat中，您只需为每个单选按钮分配相同的名称，请为不同的单选按钮组分配不同的名称。

示例(按 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>