I'm currently developing an Angular JS project that features three radio buttons. The code snippet is displayed below:
<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>
The user's food choices determine the display of additional radio button sets. Here is the HTML for these radio buttons:
<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 the user selects vegetarian, only the small radio button should be displayed. If non-vegetarian is selected, both small and medium buttons should appear. How can I achieve this dynamic behavior?
Currently, my attempted solution looks like this:
this.foodTypeChoice = () => {
const check2 = () => this.model.binType == 'small';
return check2(); }
However, all the radio buttons are still being shown. Any assistance would be greatly appreciated.