Jade code hide/display 基于复选框条件的multichecklist

Question

我想 display/hide 基于 checkbox 条件 (checked/unchecked) 的多检查表组件。

如果复选框被选中，multichecklist 组件显示可见。否则，如果未选中，则应隐藏 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 文件中做任何更改。 hide/display 功能仍然无法正常工作。

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

我在 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

Jade code hide/display 基于复选框条件的multichecklist

Jade code hide/display multichecklist based on checkbox condition

javascript

angular-ui-bootstrap

angular