Код Jade скрыть / отобразить мульти-контрольный список на основе состояния флажка - PullRequest
Новая
       8

Код Jade скрыть / отобразить мульти-контрольный список на основе состояния флажка

0 голосов
/ 07 декабря 2018

Я хочу отобразить / скрыть компонент из нескольких контрольных списков на основе условия checkbox (отмечен / не отмечен).

Если флажок установлен, компонент из нескольких контрольных списков будет отображаться.Иначе, если он не отмечен, компонент мультхеклистов должен быть скрыт.

Пожалуйста, найдите мой код 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", 
    )

Пожалуйста, найдите прикрепленный скриншот.

enter image description here

Обновление 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 файле.Все еще не работает функция скрытия / отображения.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018 
.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
0 голосов
/ 10 декабря 2018

Вы можете добавить [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 - это ваша собственность, чтобы решить, когдапоказать или нет.

Надеюсь, что это поможет.

...