带有 ng-repeat 和单选按钮的 Angular JS 表 [英] Angular JS table with ng-repeat and radio buttons
本文介绍了带有 ng-repeat 和单选按钮的 Angular JS 表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 ng-repeat 制作一个表格,该表格在每行的开头都有一个单选按钮选择器.该表如下所示:
I am trying to make a table using ng-repeat that has a radio button selector at the start of each row. The table looks like this:
<table>
<tbody>
<tr ng-repeat="model in modelList">
<td>
<input type="radio" ng-model="model.select"></input>
</td>
<td>{{ model.NDPName }}</td>
<td>{{ model.OEM }}</td>
<td>{{ model.version }}</td>
<td>{{ model.dateAdded }}</td>
<td>{{ model.validUntil }}</td>
</tr>
</tbody>
</table>
ng-repeat 取自如下所示的模型列表:
The ng-repeat is taking from a modelList that looks like:
$scope.modelList =
[
{
select: false,
NDPName: "NDP1",
OEM: "CHOAM Inc.",
version: "01",
dateAdded: "Jan 1, 2013",
validUntil: "Jan 1, 2014",
},
{
select: false,
NDPName: "NDP2",
OEM: "Tyrell Corp.",
version: "01",
dateAdded: "Jan 1, 2014",
validUntil: "Jan 1, 2015",
},
{
select: false,
NDPName: "NDP3",
OEM: "Stark Industries",
version: "01",
dateAdded: "Jan 1, 2015",
validUntil: "Jan 1, 2016",
},
{
select: false,
NDPName: "NDP4",
OEM: "Monsters Inc.",
version: "01",
dateAdded: "Jan 1, 2016",
validUntil: "Jan 1, 2017",
},
{
select: false,
NDPName: "NDP5",
OEM: "ACME Corp",
version: "01",
dateAdded: "Jan 1, 2017",
validUntil: "Jan 1, 2018",
}
];
我遇到的问题是单选按钮的行为不像单选按钮.它们每个都在一个单独的范围内,因此允许选择表中的多行.我该如何解决这个问题?
The problem I am running into is that the radio buttons are not behaving like radio buttons. They are each in a separate scope and will therefore allow multiple rows in the table to be selected. How can I fix this?
推荐答案
您需要为单选按钮设置 name
属性,以便将它们组合在一起.
You need to set a name
propertyfor the radio buttons so they will be grouped together.
<input type="radio" name="groupName" ng-model="model.select" />
这篇关于带有 ng-repeat 和单选按钮的 Angular JS 表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文