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按其名称属性进行分组。在ng-repeat中，您只需指定相同name的每个单选按钮，请为不同的单选按钮组指定不同的名称。

示例（由ng-repeat的每一行分组的radiobutton）：

<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>

无法使用ng-repeat选择多个无线电选项

1 个答案: