Jade 代码隐藏/显示基于复选框条件的多核对表答案

【问题标题】：Jade code hide/display multichecklist based on checkbox conditionJade 代码隐藏/显示基于复选框条件的多核对表
【发布时间】：2018-12-11 20:02:50
【问题描述】：

我想根据checkbox 条件（选中/未选中）显示/隐藏多核对表组件。

如果选中该复选框，则显示多核对列表组件。否则，如果未选中，则应隐藏 multichecklist 组件。

请在下面找到我的 Jade 代码，没有checkbox 条件。

  .col-lg-12
  input(type='checkbox')
  label(for="show_branch")  Show Branch Dealer

.row.multiselect-controls
  .col-lg-3.col-md-4
    multichecklist(
    list-id="region", 
    list-title="{{'regionTitle'|translate}}",
    list-items="regions", 
    on-select="onRegionSelect", 
    on-deselect="onRegionDeselect", 
    )

请查看随附的屏幕截图。

更新 1

请找到我的玉文件

.col-lg-12
      input(type='checkbox', id='showBranchDealer', ng-click="delegate.onShowBranchDealer();")
      label(for="show_branch_dealer")  Show Branch Dealer


.col-lg-3.col-md-4
multichecklist(
list-id="region", 
list-title="{{'regionTitle'|translate}}",
list-items="regions", 
on-select="onRegionSelect", 
on-deselect="onRegionDeselect", 
)

请找到我的咖啡脚本文件

onShowBranchDealer: ->
   if (document.getElementById('showBranchDealer').checked)
     alert("Checked..");
   else
      alert("Unchecked");

在此代码中，我的警报消息工作正常。但现在，我想隐藏 list-id="region", (multichecklist) 元素而不是警报消息。

更新 2

.col-lg-3.col-md-4
    multichecklist(
    list-id="region", 
    ng-class="isHidden"
    list-title="{{'regionTitle'|translate}}",
    list-items="regions", 
    on-select="onRegionSelect", 
    on-deselect="onRegionDeselect", 
    )

我已经更新了.jade 文件中的上述代码，但我没有对.coffee 文件进行任何更改。仍然无法使用隐藏/显示功能。

【问题讨论】：

标签： javascript angular angular-ui-bootstrap

【解决方案1】：

你可以添加一个[ngClass]来绑定一个属性，这样你就可以设置它什么时候显示。

.col-lg-3.col-md-4
    multichecklist(
    list-id="region", 
    [ngClass]="isHidden"
    list-title="{{'regionTitle'|translate}}",
    list-items="regions", 
    on-select="onRegionSelect", 
    on-deselect="onRegionDeselect", 
    )

isHidden 是您决定何时显示的属性。

希望对您有所帮助。

【讨论】：

如何从coffeescript 设置“isHidden”属性？
在你的component.ts中定义一个属性并在模板中调用它。
我自己提供了我的更新。它仍然无法正常工作。不确定在 .coffee 文件中的何处进行更改。

【解决方案2】：

.col-lg-6.col-md-offset-6
  input(type='checkbox', id='showBranchDealer', ng-click="delegate.onShowBranchDealer();")
  label(for="show_branch_dealer")  Show Branch Dealer

我在jade 文件中使用了ng-show 属性。

.col-lg-3.col-md-4
multichecklist(
list-id="region", 
ng-show="showBranchDealers", 
list-title="{{'regionTitle'|translate}}",
list-items="regions", 
on-select="onRegionSelect", 
on-deselect="onRegionDeselect", 
)

请在coffee script文件中找到我的更改

onShowBranchDealer: ->
      if(document.getElementById('showBranchDealer').checked)
        $scope.showBranchDealers = true
      else
        $scope.showBranchDealers = false

【讨论】：