Показать и скрыть компоненты 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

Прежде всего, вам следует избегать помещения функций в директивы show / hide / if, это замедляет работу приложения;Вы должны использовать логические операторы или логические переменные.Вы можете использовать операторы show / hide непосредственно на входах

<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

Кроме того, вы можете использовать дополнительные переменные, чтобы хранить в них операторы и обновлять их всякий раз, когда пользователь нажимает на кнопки, чтобы изменить тип пищи

Answer 2

Можете ли вы попробовать что-то подобное?

 <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