Angular JS muestra la entrada cuando se verifica la radio

Question

Tengo una matriz de JavaScript como esta:

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

Luego tengo una lista de botones de opción generados por Angular JS usando la matriz:

<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>

Esto funciona.En la matriz hay un extraField con valor true en uno de los índices.Necesito Angular para mostrar un campo de entrada adicional cuando un botón de opción con el extraField La configuración está marcada.La matriz puede cambiar para tener más de un índice con el extraField valor.

Entonces el campo extra se vería así.

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

Aparte de saber utilizar ng-show, No estoy seguro de cuál sería la forma correcta de hacer esto.El ejemplo anterior, por supuesto, no hace nada.

Answer 1

Podrías usar ng-if y ng-show combinación y una variable de alcance para realizar un seguimiento de lo que se selecciona.ng-if se asegurará de que el cuadro de texto no se agregue de forma no deseada al DOM y ng-show lo mostrará y lo ocultará a medida que se alterna la radio.

En su entrada: -

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

y en tu Radio agrega 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>

y agregue su controlador: -

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

Papelera

Incluso podrías usar howMany para rastrear lo que se seleccionó, excepto que debe configurarlo como una propiedad para un objeto en el alcance (ya que ng-repeat crea su propio alcance secundario y la herencia proto entra en juego).

Entonces en tu radio solo agrega ng-model="option.howMany", en tu controlador agrega $scope.option = { }; y en el cuadro de texto ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

Papelera

Answer 2

Si solo tuviste un plunker ... sin probar esto

<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, salida

<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 forma más fácil de mostrar algo cuando el botón de radio está marcado es lo siguiente:

Diga que tiene un grupo de radio con: ng-model="radio-values"

Para mostrar u ocultar su entrada, depende de los valores dentro del grupo de radio: value="radio-value1", value="radio-value2"

Para mostrar finalmente u ocultar el campo de entrada (digamos que desea mostrar algo si se establece "Radio-Value11") que realiza: <input ng-show="radio-values == 'radio-value1'" ...>