Angular JS show input when radio checked

Question

I have a javascript array like so:

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

Then I have a list of radio buttons generated by Angular JS using the array:

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

This works. In the array there is an extraField with value true in one of the indexes. I need Angular to show an extra input field when a radio button with the extraField setting is checked. The array may change to have more than one index with the extraField value.

So the extra field would look something like this.

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

Other than knowing to use ng-show, I'm not sure what would be the correct way to do this. The above example of course does nothing.

PSL · Accepted Answer · 2014-07-30 22:48:34Z

1

You could use ng-if and ng-show combination and a scope variable to keep track what is selected. ng-if will make sure the textbox is not added unwantedly to the DOM and ng-show to show and hide as the radio gets toggled.

In your input:-

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

and in your Radio add 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>

and add in your controller:-

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

Bin

You could even use howMany to track what was selected except that you need to set it as a property to an object on the scope (Since ng-repeat creates its own child scope and proto inheritance comes to play).

So in your radio just add ng-model="option.howMany", in your controller add $scope.option = { }; and in the text box ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"

Bin

edited Jul 30, 2014 at 22:48

answered Jul 30, 2014 at 22:39

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CaribouCode Over a year ago

Yeh that's the ticket!

PSL Over a year ago

@Cooper If howmany is bound only once for the list then you can just use that like this:- jsbin.com/yepezoyu/1/edit

CaribouCode Over a year ago

I wonder is there a way to move the text input out of the repeat loop so it can sit underneath the entire list? It breaks the code when I move it out at the moment.

CaribouCode Over a year ago

Amazing! Wish I could give you more up votes. Thanks

bhantol · Accepted Answer · 2014-07-30 22:28:47Z

0

If only you had a plunker...without that try this

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

answered Jul 30, 2014 at 22:28

bhantol

9,6368 gold badges48 silver badges84 bronze badges

2 Comments

CaribouCode Over a year ago

This seems to generate the input but I need it to only show the new input when the related radio button is checked.

bhantol Over a year ago

Yup. @PSL's answer will work fine. I wonder why ng-show ? Could'nt ng-if="quantity.extraField && option.selected === howMany" suffice along with the ng-click ?

sylwester · Accepted Answer · 2014-07-30 22:33:43Z

0

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

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

answered Jul 30, 2014 at 22:33

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

user4911648 · Accepted Answer · 2016-09-09 08:03:40Z

0

The easiest way to show something when radio button is checked is the following:

Lets say you have a radio-group with: ng-model="radio-values"

To show or hide your input then depends on the values within the radio-group: value="radio-value1", value="radio-value2"

To finally show or hide the input field (lets say you want to show something if "radio-value1" is set) you do: <input ng-show="radio-values == 'radio-value1'" ...>

answered Sep 9, 2016 at 8:03

user4911648

Collectives™ on Stack Overflow

Angular JS show input when radio checked

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related