angulaire.js - valeur sélectionnée par défaut de répétition radio angulaire

Question

Le code html est le suivant :

<ul>
  <li ng-repeat="thing in favoriteThings">
    <input type="radio" ng-value="thing" ng-model="selected" name="stuff"/>
      {{thing.text}}
  </li>
</ul>

le code js est le suivant :

$scope.favoriteThings = [
    {nr: 1, text: "Raindrops on roses"},
    {nr: 2, text: "Whiskers on kittens"},
    {nr: 3, text: "Bright copper kettles"},
    {nr: 4, text: "Warm woolen mittens"},
    {nr: 5, text: "Brown paper packages tied up with strings"},
    {nr: 6, text: "Cream colored ponies"},
    {nr: 7, text: "Crisp apple streudels"},
    {nr: 8, text: "Doorbells"},
    {nr: 9, text: "Sleigh bells"},
    {nr: 10, text: "Schnitzel with noodles"},
    {nr: 11, text: "Wild geese that fly with the moon on their wings"},
    {nr: 12, text: "Girls in white dresses with blue satin sashes"},
    {nr: 13, text: "Snowflakes that stay on my nose and eyelashes"},
    {nr: 14, text: "Silver white winters that melt into springs"}
  ];
  
  $scope.selected = {nr: 1, text: "Raindrops on roses"};

Actuellement, lorsque je fais cela, je n'arrive pas à sélectionner une valeur par défaut, et je ne sais pas où se situe le problème.

Je souhaite qu'une valeur soit sélectionnée par défaut dès le chargement de la page, et le type de valeur de chaque élément est un objet. Comment dois-je procéder ?

Answer 1

Besoin de définir la valeur par défaut de ng-model
telle que :

  $scope.selected = $scope.favoriteThings[0];

Cette option sera sélectionnée par défaut.

Ne peut pas être utilisé

  $scope.selected = {nr: 1, text: "Raindrops on roses"};

Parce que seule la même référence à Object dans ng-model sera considérée comme égale. La méthode ci-dessus crée un nouvel objet, qui n'est pas égal à la valeur en répétition

Answer 2

peut être utilisé dans ng-repeat ng-checked, par exemple :

<label ng-repeat="(key, val) in genders track by $index">
    <input type="radio" name="gender" value="{{key}}" ng-checked="list.gender==key">{{val}}
</label>