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

Question

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

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

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

<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    

如果用户选择素食，我只想显示小单选按钮。如果用户选择非素食，我只需要显示小和中按钮。同样，我该怎么做？

目前我尝试这样

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

return check2(); }

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

Answer 1

你能尝试这样的事情吗？

 <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