web-dev-qa-db-fra.com

Boutons radio ng-vérifié avec le modèle ng

Dans ma page HTML, j'ai deux ensembles de boutons radio basés sur des valeurs booléennes: Labeled: "Yes" et "No"/Values: True et False respectivement. Je renseigne un formulaire complet à partir d'une table de base de données PostgreSQL pour permettre à l'utilisateur authentifié d'afficher le formulaire avec les données renseignées et de modifier les champs renseignés, y compris les boutons radio, puis enregistre le formulaire qui enregistre les données dans la base de données. Tous les autres champs de texte sont remplis sans problème. Je rencontre un problème avec le contrôle préalable des boutons radio. 

Le texte ci-dessous ne pré-remplit pas le contenu vérifié sur le serveur frontal (mais ajoute l'attribut correct de vérifié dans le source HTML):

    <input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

Cependant, cela vérifie le bon bouton radio en charge:

    <input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />

Remarque: Je devais vérifier la valeur booléenne de la chaîne dans la directive ng-vérifiée, car la valeur booléenne est toujours renvoyée sous la forme d'une chaîne de PostgreSQL. Apparemment, cela faisait partie de la conception de PostgreSQL lors de la requête de données de colonnes contenant des types de données booléens. 

Lors de l'ajout de la directive ng-model, le bouton radio n'est plus coché (du moins dans la vue du navigateur rendue). La partie étrange est que j'ai regardé la source et qu'elle vérifie clairement la bonne. Ce qui est encore plus étrange, c'est que je dois cliquer sur le bouton radio deux fois pour le «cocher». J'ai testé cela dans la dernière version de Chrome, FF et IE et le même problème se pose. 

La question qui se pose est la suivante: lors de l'ajout de la directive ng-model, pourquoi la source HTML ajouterait-elle 'cochée' dans l'attribut du bouton radio, mais ne marque apparemment pas le bouton radio? De plus, pourquoi devrais-je cliquer deux fois sur le bouton radio que IS est censé être coché?

Solution: Pour résoudre ce problème, j’ai supprimé la directive ng-vérifié des boutons radio et n’ai utilisé que le modèle ng comme suggéré par @Cypher et @aet. J'ai ensuite remplacé l'attribut value par la directive ng-value "true" & "false". Ensuite, je règle les valeurs dans le contrôleur. 

HTML

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Angulaire JS 

app.controller('peopleCtrl', function($scope, peopleFactory){
    ...
    peopleFactory.getPerson(personParams).then(function(data){
        $scope.person = data;
        /* moved from ng-checked */
        $scope.person.billing = data.billing == 'true';
    });
    ...
};
angularjspostgresqlradio-buttonbooleanangular-ngmodel
15
RNickMcCandless

Je pense que vous ne devriez utiliser que ng-model et que cela devrait bien fonctionner pour vous. Voici le lien vers la documentation officielle de angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Le code de l'exemple ne devrait pas être difficile à adapter à votre situation spécifique:

<script>
   function Ctrl($scope) {
      $scope.color = 'blue';
      $scope.specialValue = {
         "id": "12345",
         "value": "green"
      };
   }
</script>
<form name="myForm" ng-controller="Ctrl">
   <input type="radio" ng-model="color" value="red">  Red <br/>
   <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
   <input type="radio" ng-model="color" value="blue"> Blue <br/>
   <tt>color = {{color | json}}</tt><br/>
</form>
34
TlonXP

J'ai résolu mon problème en utilisant simplement ng-init pour la sélection par défaut au lieu de ng-checked

<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />
7
X-Coder

[Option personnelle] Éviter d'utiliser $ scope, basé sur John Papa Angular Style Guide

mon idée est donc de tirer parti du modèle actuel:

(function(){
  'use strict';
  
   var app = angular.module('way', [])
   app.controller('Decision', Decision);

   Decision.$inject = [];     

   function Decision(){
     var vm = this;
     vm.checkItOut = _register;

     function _register(newOption){
       console.log('should I stay or should I go');
       console.log(newOption);  
     }
   }

     
     
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="way">
  <div ng-controller="Decision as vm">
    <form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
 <label class="radio-inline">
  <input type="radio" name="option" ng-model="decision.myWay"
                           ng-value="false" ng-checked="!decision.myWay"> Should I stay?
                </label>
                <label class="radio-inline">
                    <input type="radio" name="option" ng-value="true"
                           ng-model="decision.myWay" > Should I go?
                </label>
  
</form>
  </div>
  
</div>

J'espère pouvoir aider;)

3
davidwillianx

S'il vous plaît expliquer pourquoi même ng-model est utilisé? Et quelle valeur est passée à travers ng- model et comment? Pour être plus précis, si j'utilise console.log(color) quelle serait la sortie?

1
Rudrika