时间戳

首页 > 解决方案 > 不使用div，根据条件显示和隐藏html组件

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

问题描述

我正在开发 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(); }

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

标签： javascriptangularjs

解决方案

首先，您应该避免将函数放在 show/hide/if 指令中，这会降低应用程序的速度；您应该使用逻辑语句或布尔变量。您可以直接在输入上使用显示/隐藏语句

<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

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

推荐阅读