html组件隐藏,根据条件显示和隐藏html组件，而不使用div

我正在研究Angular JS项目。它有三个单选按钮，如下所示。

layout="row">

Choices

ng-model="booking.model.foodType"

value="vegetarian"

class="sys-input sys-input__radio"

title="" />

Vegetarian

ng-model="booking.model.foodType"

value="vegan"

class="sys-input sys-input__radio"

title="" />

Vegan

ng-model="booking.model.foodType"

value="nonvegetarian"

class="sys-input sys-input__radio"

title="" />

Non Vege

这些是食物选择，并根据用户选择我想要显示另一个单选按钮组。这个单选按钮html如下

layout="row">

ng-model="booking.model.foodSize"

value="small"

title="" > Small

ng-model="booking.model.foodSize"

value="medium"

title="" > Medium

ng-model="booking.model.foodSize"

value="large"

title="" > Large

如果用户选择素食，我只想显示小的单选按钮。如果用户选择非素食，我只需要显示中小按钮。我是怎么做到的？

此刻我尝试这样

this.foodTypeChoice=()=> {

const check2 = ()=>this.model.binType == 'small';

return check2(); }

但它显示了所有单选按钮。请帮忙