Jade代码根据复选框条件隐藏/显示多核对清单

Question

我想基于checkbox条件（选中/未选中）显示/隐藏多核对清单组件。

如果选中此复选框，则将显示multichecklist组件。否则，如果未选中，则应该隐藏多清单组件。

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

  .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",（多检查表）元素而不是警报消息。

更新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文件进行任何更改。隐藏/显示功能仍然无法正常工作。

Answer 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是您的财产，可以决定何时显示。

希望获得帮助。

Answer 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

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

.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