web-dev-qa-db-fra.com

AngularJs: Comment définir le bouton radio coché en fonction du modèle

J'ai un modèle qui revient dans l'objet storeLocations avec une valeur isDefault. Si isDefault renvoie la valeur true, je ne définirai pas ce bouton radio du groupe comme coché.

Je ne sais pas si j'ai besoin de faire un $ each (données, fonction (index, valeur) et de parcourir chaque objet renvoyé ou s'il existe un moyen plus simple de le faire en utilisant les constructions angular.

Objet:

storeLocations = [
 {
  ... more values,
  isDefault: true
 }
]

Balisage:

    <tr ng-repeat="location in merchant.storeLocations">
        <td>{{location.name}}</td>
        <td>{{location.address.address1}}</td>
        <td>{{location.address.address2}}</td>
        <td>{{location.address.city}}</td>
        <td>{{location.address.stateProvince}}</td>
        <td>{{location.address.postalCode}}</td>
        <td>{{location.address.country}}</td>
        <td>{{location.website}}</td>
        <td>{{location.zone}}</td>
        <td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>
javascriptangularjsradio-group
59
Christopher Marshall

Utilisez ng-value au lieu de value.

ng-value="true"

La version avec ng-checked est pire à cause de la duplication du code.

67
ivan.a.bovin

Si vous avez un groupe de boutons radio et que vous voulez que le bouton radio soit coché en fonction du modèle, le bouton radio qui a les mêmes propriétés value et ng-model est automatiquement coché.

<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">

Si la valeur de myRating est "2", le deuxième bouton radio est sélectionné.

56
Rubi saini

Une façon pour moi de voir plus puissant et d’éviter d’avoir un isDefault dans tous les modèles est d’utiliser les attributs ng ng-model, ng-value et ng-checked.

ng-model : lie la valeur à votre modèle.

ng-value : valeur à transmettre à la liaison _ng-model_.

ng-vérifié : valeur ou expression évaluée. Utile pour les boutons radio et les cases à cocher.

Exemple d'utilisation: Dans l'exemple suivant, j'ai mon modèle et une liste des langues prises en charge par mon site. Pour afficher les différentes langues prises en charge et mettre à jour le modèle avec la langue de sélection, nous pouvons le faire de cette manière.

_<!-- Radio -->
<div ng-repeat="language in languages">

  <div>
    <label>

      <input ng-model="site.lang"
             ng-value="language"
             ng-checked="(site.lang == language)"
             name="localizationOptions"
             type="radio">

      <span> {{language}} </span>

    </label>
  </div>

</div>
<!-- end of Radio -->
_

Notre modèle _site.lang_ obtiendra une valeur language chaque fois que l'expression en cours d'évaluation _(site.lang == language)_ est vraie. Cela vous permettra de le synchroniser facilement avec le serveur puisque votre modèle a déjà changé.

23
kitimenpolku

J'ai fini par utiliser l'attribut angular intégré ng-checked="model"

21
Christopher Marshall

Comme discuté un peu dans les commentaires de la question, voici une façon de le faire:

  • Lorsque vous récupérez les données pour la première fois, parcourez tous les emplacements et définissez storeDefault sur le magasin par défaut.
  • Dans le balisage: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
  • Avant de sauvegarder les données, parcourez toutes les boutiques merchant.storeLocations et définissez isDefault sur false, à l'exception du magasin dans lequel location.id est égal à storeDefault.

Ce qui précède suppose que chaque emplacement a un champ (par exemple, id) qui contient une valeur unique.

Notez que $ parent.storeDefault est utilisé car ng-repeat crée une portée enfant et nous souhaitons manipuler le paramètre storeDefault sur la portée parent.

violon .

2
Mark Rajcok

Faites juste quelque chose comme ça, <input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>

0
tyne