Angular JS montrer d'entrée lorsque la radio coché

Question

J'ai un tableau javascript comme ceci:

$scope.quantityMachines = [
  { 'snippet' : 'One' },
  { 'snippet' : 'Two' },
  { 'snippet' : 'Three or more',
    'extraField' : true },
  { 'snippet' : 'Not sure, need advice' }
];

Puis-je avoir une liste de boutons radio générées par Angular JS à l'aide de la matrice:

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
  </li>
</ul>

Les travaux de cette.Dans le tableau il y a un extraField avec la valeur true dans l'un des indices.J'ai besoin Angulaire de montrer un supplément de champ de saisie lorsqu'un bouton radio avec l' extraField paramètre est activé.Le tableau peut changer pour avoir plus d'un index avec la extraField de la valeur.

De sorte que le champ supplémentaire devrait ressembler à quelque chose comme ça.

<input type="text" ng-model="extraInfo" ng-show="howMany" />

Autre que de savoir utiliser ng-show, Je ne suis pas sûr de ce que serait la bonne façon de le faire.L'exemple ci-dessus n'est évidemment rien.

Answer 1

Vous pouvez utiliser ng-if et ng-show combinaison et d'un champ variable pour garder une trace de ce qui est sélectionné.ng-si vous assurez-vous que la zone de texte n'est pas ajouté unwantedly vers les DOM et ng-show pour afficher et masquer la radio obtient basculé.

Dans votre entrée:-

<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />

et dans votre Radio ajouter ng-click="option.selected=quantity.snippet"

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" ng-click="option.selected=quantity.snippet"/>
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
    <input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
  </li>
</ul>

et d'ajouter dans votre contrôleur:-

$scope.option = { selected:'none'};

Bin

Vous pourriez même utiliser howMany pour suivre ce qui a été sélectionné à l'exception que vous avez besoin de la définir comme une propriété à un objet sur la portée (Depuis ng-repeat crée son propre enfant et proto héritage vient de jouer).

Donc, dans votre radio juste ajouter ng-model="option.howMany", dans votre controller ajouter $scope.option = { }; et dans la zone de texte ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

Bin

Answer 2

Si seulement vous aviez une plunker...sans que d'essayer cette

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" 
        value="{{quantity.snippet}}" ng-model="howMany" />
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
    <input type="text" ng-model="extraInfo" **ng-if="quantity.extraField"** />
  </li>
</ul>

Answer 3

http://jsbin.com/biwah/1/edit?html,js,sortie

<ul>
  <li ng-repeat="quantity in quantityMachines">
    <input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
    <label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
    <input type="text" ng-model="quantity.extraInfo" ng-show="quantity.extraField" />
  </li>
</ul>

Answer 4

La meilleure façon de montrer quelque chose quand un bouton radio est coché est la suivante:

Disons que vous avez un radio-groupe avec: ng-model="radio-values"

Pour afficher ou masquer votre entrée dépend des valeurs au sein de la radio-groupe: value="radio-value1", value="radio-value2"

Enfin d'afficher ou de masquer le champ de saisie (permet de dire que vous voulez montrer quelque chose de si "radio-valeur1" est activée), vous ne:<input ng-show="radio-values == 'radio-value1'" ...>