Show and hide html components based on condition without using div

Question

I'm working on Angular JS project. It has three radio buttons as follows.

 <div class="sys-form__field" layout="row"> <label class="sys-label sys-label--radio" flex flex-gt-xs="33">Choices</label> <input type="radio" ng-model="booking.model.foodType" value="vegetarian" class="sys-input sys-input__radio" title="" /> <md-button ng-click="booking.setRadio('foodType', 'vegetarian')">Vegetarian</md-button> <input type="radio" ng-model="booking.model.foodType" value="vegan" class="sys-input sys-input__radio" title="" /> <md-button ng-click="booking.setRadio('foodType', 'vegan')">Vegan</md-button> <input type="radio" ng-model="booking.model.foodType" value="nonvegetarian" class="sys-input sys-input__radio" title="" /> <md-button ng-click="booking.setRadio('foodType', 'nonvegetarian')">Non Vege</md-button> </div>

These are the food choices and based on what user selects I want to show another radio button sets. This radio buttons html as follows

<div class="sys-form__field" ng-show="booking.foodSizeChoice()" layout="row"> <input type="radio" ng-model="booking.model.foodSize" value="small" title="" > Small <input type="radio" ng-model="booking.model.foodSize" value="medium" title="" > Medium <input type="radio" ng-model="booking.model.foodSize" value="large" title="" > Large

If user selects vegetarian , I only want to show small radio button. If user selects Non vegetarian I need to show only small and medium buttons. like wise how do I that?

At the moment I try like this

 this.foodTypeChoice=()=> { const check2 = ()=>this.model.binType == 'small'; return check2(); }

But it shows all the radio buttons. Please help

Kadir Bušatlić · Accepted Answer · 2018-05-30 08:58:04Z

1

Can you try something like this?

 <input type="radio" ng-model="booking.model.foodSize" value="small" title="" ng-show="booking.model.foodType == 'vegetarian'"> Small <input type="radio" ng-model="booking.model.foodSize" value="medium" title="" ng-show="booking.model.foodType == 'nonvegetarian'"> Medium <input type="radio" ng-model="booking.model.foodSize" value="large" title="" ng-show="booking.model.foodType == 'nonvegetarian'"> Large

answered May 30, 2018 at 8:58

Kadir Bušatlić

2262 silver badges12 bronze badges

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

3 Comments

venura Over a year ago

Thanks for the answer. But it doesn't work. now pizza sizes show at the first. I want to show them after button clicks. The second thing is it's not hiding. It only hide the radio button circle. I tried to add a label as well

Kadir Bušatlić Over a year ago

Yes I understand, bit this is concept how you can show or hide whatever you want, just implement your condition and ude model which you need

venura Over a year ago

I know the concept is ng-show , I also added that in my question :) didn't find a good answer from you

Dmitriy · Accepted Answer · 2018-05-30 08:58:07Z

First of all, you should avoid putting functions in show/hide/if directives, it slows the application; you should use logical statements or boolean variables. You can use show/hide statements directly on inputs

<input ng-show="booking.model.foodType === 'vegetarian' || booking.model.foodType === 'nonvegetarian'" type="radio" ng-model="booking.model.foodSize" value="small" title=""> Small <input ng-show="booking.model.foodType === 'nonvegetarian'" type="radio" ng-model="booking.model.foodSize" value="medium" title=""> Medium <input type="radio" ng-model="booking.model.foodSize" value="large" title=""> Large

Apart from that you can use additional variables to store statements in them and update them whenever user clicks on buttons to change food type

Thanks for the answer. But it doesn't work. now pizza sizes show at the first. I want to show them after button clicks. The second thing is it's not hiding. It only hide the radio button circle. I tried to add a label as well
Hey, just create a new variable on the scope, that will be updated once user clicks on the button. Then use that variable in the div that shows whole section, add labels that will wrap inputs and put show/hide statements on them by using just created variable to check which type is picked
I created a variable as clickFoodType , initialize value as false. and in foodTypeChoice I checked if user select small I changed clickFoodType to true. Then in ng sho of organic added that variable. Still issue is sae , all shows
Would be better if you create a fiddle or similar small example, can you do that?

Collectives™ on Stack Overflow

Show and hide html components based on condition without using div

2 Answers 2

3 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Related