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

Answer 2

首先，你应该避免将函数放在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

除此之外，您可以使用其他变量在其中存储语句，并在用户单击按钮更改食物类型时更新它们

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

2 个答案: