角JS表NG-重复和单选按钮 [英] Angular JS table with ng-repeat and radio buttons

问题描述

我试图让使用NG-重复了在每一行的开始单选按钮选择一个表。该表是这样的：

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的重复从modelList看起来像服用：

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?

推荐答案

您需要设置一个名称 propertyfor单选按钮，这样他们将被组合在一起。

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

这里了解name属性

这篇关于角JS表NG-重复和单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！