Portée du bouton radio

Question

Je travaille sur une liste de boutons radio où un utilisateur peut choisir parmi une liste pré-remplie de problèmes, ou sélectionner un autre bouton radio, puis saisir son problème spécifique.

Je peux obtenir la liste pré-remplie de boutons radio pour travailler et régler le problème (la sortie de la variable de portée le confirme), mais l'introduction de la fonctionnalité «autre» me bloque. Lorsque je sélectionne autre, il ne semble pas lié à la variable de portée. J'ai remarqué dans le dom qu'il manque un class = "ng-scope" que les autres boutons radio semblent obtenir de la ng-repeat, mais je ne suis pas sûr que ce soit le problème.

 <form> 

      // This part loops through the list of problems and makess radio buttons 
      <div ng-repeat="problem in selectedType['nature_of_problem']"> 
       <input type="radio" ng-model="$parent.natureOfProblem" ng-value="problem"/> 
      </div> 

      // Ideally this part is where the "other" radio is, it's still in the form 
      <input type="radio" ng-model="natureOfProblem" ng-value="other" ng-checked=""> 

     </form> 

Answer 1

travail jsFiddle:

http://jsfiddle.net/HB7LU/3794/

J'ai vu quelques questions, parmi lesquelles:

• Utilisation ng valeur au lieu de la valeur ancienne plaine pour "autre"
• En utilisant une primitive au lieu de la notation par points (si vous voulez que votre vue écrit de façon fiable une variable, elle doit être quelque chose.votre variable insulaire annonce de tout simplement vieux yourVariable)

Espérons que cela aide!

function MyCtrl($scope) { 
    $scope.uiState = {}; 
    $scope.uiState.natureOfProblem = 1; 
    $scope.selectedType = {}; 
    $scope.selectedType.nature_of_problem = [1,2,3]; 
} 

<div ng-controller="MyCtrl"> 
    <p>Nature of problem is: {{uiState.natureOfProblem}}</p> 
    <form> 
     <div ng-repeat="problem in selectedType['nature_of_problem']"> 
      <input type="radio" ng-model="uiState.natureOfProblem" ng-value="problem"/><span ng-bind="problem"></span> 
     </div> 

     <input type="radio" ng-model="uiState.natureOfProblem" value="Other" /><span>Other</span> 

    </form> 
</div> 

EDIT pour répondre aux questions des OP:

J'ai tendance à utiliser ng-bind par habitude - dans les navigateurs plus lents comme Firefox, il garde "{{bla}}" d'apparaître sur l'écran comme tout charge. Les versions plus récentes d'Angular ont également un ng-cloak à cet effet, que je devrais probablement prendre l'habitude d'utiliser à la place. :) (Je me souviens vaguement de lire que "{{blah}}" peut causer des problèmes dans IE, mais j'ai très probablement fait cela.)

L'utilisation de la notation par points se rapporte au fait que Angular ne peut pas maintenir liaisons de données sur des objets flambant neufs. Pour essayer de l'expliquer sans utiliser de termes tels que "scope" et "inheritance": Si vous influencez un objet existant en changeant yourObject.anAttribute, l'objet global existe de manière cohérente tout au long de ce processus et ne supprime pas sa liaison. Mais si vous avez blahVariable qui est égal à 8, et que vous définissez blahVariable égal à 7, vous avez essentiellement jeté l'ancienne donnée et créé une nouvelle donnée entièrement. Cette nouvelle pièce ne maintient pas la liaison, de sorte que le contrôleur n'obtient jamais le mémo de l'avis que la valeur a changé.

Parfois, je trouve cela utile, en fait - vous pouvez brièvement manipuler une variable dans la vue pour un but rapide et sale sans que le contrôleur s'en aperçoive. :)