Angular JS table avec ng-repeat et des boutons radio

Je suis en train de faire un tableau à l'aide de ng-repeat qui a un radio bouton sélecteur au début de chaque ligne. Le tableau ressemble à ceci:

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

La ng-repeat est prise à partir d'un modelList qui ressemble à:

    $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",
        }
    ];

Le problème, je suis en cours d'exécution en est que les boutons de la radio ne se comportent pas comme des boutons radio. Ils sont chacun dans son champ d'application et permettra donc plusieurs lignes dans la table sélectionnée. Comment puis-je résoudre ce problème?

Pour info, votre <input></input> syntaxe n'est pas valide. Si vous utilisez un doctype XHTML, c'est <input /> sinon juste <input>.

OriginalL'auteur MitchVz | 2013-08-23

  1. 14

    Vous devez définir un name propertyfor les boutons de la radio de sorte qu'ils seront regroupés.

    <input type="radio" name="groupName" ng-model="model.select" />

    lisez à propos de la propriété de nom ici

    Wow, c'était un simple correctif. Merci!!!!
    Les plus simples corrections sont les plus faciles à oublier. Heureux de vous avoir aidé 🙂

    OriginalL'auteur Kabb5

  2. 1

    Vous devez spécifier le nom de la balise à l'entrée. Ensuite, toutes les entrées appartiennent au même groupe et se comportera comme prévu:

    <input type="radio" name="myGroup" ng-model="model" />
    Le ng-model devrait inclure un point. Voir tête d'oeuf.io/cours/angularjs-le-point

    OriginalL'auteur Wagner Francisco