AngularJS: отображать HTML-элемент при применении действия - PullRequest
Новая
       28

AngularJS: отображать HTML-элемент при применении действия

0 голосов
/ 22 сентября 2018

Я использую angularJS с синтаксисом coffeescript при разработке моего проекта, я хочу отображать кнопку только при применении какого-либо фильтра (поиск по имени, по дате, по типу ...), вы найдете прикрепленные варианты экрана, которые описываютлучше ситуация.

вот часть angularjs: 

@am.controller 'ReportsIndexController', ( $scope, $translate, SessionStorageService,
                                          AMDataStore, Utility, GetModal, NotificationService ) ->
  DATASTORE_CACHE_KEY = 'ReportsIndexController'
  dataStore           = AMDataStore.getInstance()

  defaultActiveTab = 'reports'
  $scope.tabActive = SessionStorageService.getReportTab( 'reports' ) || defaultActiveTab
  $scope.tabsActive   = []
  $scope.filterActivated = false
  $scope.count =
    reports:      undefined
    otherReports: undefined
    sentReports:  undefined

  dataStore.get DATASTORE_CACHE_KEY, "/report_templates", {}, ( data ) ->
    $scope.reportTemplates = data.report_sheet_templates()

  $scope.$watch 'postParams.options.template_id', ( template_id ) ->
    if template_id?
      $scope.filterActivated = true
      reportTemplate = dataStore.report_sheet_templates[ template_id ]
      $scope.steps   = _( reportTemplate.steps ).map ( step ) ->
        id: step.key, label: step.value, order: step.order
      stateEntry  =
        id:    'unassigned'
        label: $translate.instant( 'filters.state' )
        order: -1
      $scope.steps.push( stateEntry )
      $scope.stepsLength = $scope.steps.length
    else
      $scope.filterActivated = false

  $scope.initFilter = ->
    $scope.inputReport = {}
    reportParams       = SessionStorageService.getPostParams( "reports" )
    if reportParams and reportParams.scopes and reportParams.scopes.report
      $scope.inputReport =
        from: reportParams.scopes.report.from
        to:   reportParams.scopes.report.to

    $scope.inputSentReport = {}
    sentReportsParams      = SessionStorageService.getPostParams( "sent_email_recipients" )
    if sentReportsParams and sentReportsParams.scopes and sentReportsParams.scopes.report
      $scope.inputSentReport =
        from: sentReportsParams.scopes.report.from
        to:   sentReportsParams.scopes.report.to

    $scope.displayOptions =
      itemsPerPage: SessionStorageService.getDisplayOptions( "reports" )?.perPage or 25
      query:        SessionStorageService.getDisplayOptions( "reports" )?.query   or ''

    $scope.postParams     =
      options:
        template_id: SessionStorageService.getPostParams( "reports" )?.template_id
        step_key:    SessionStorageService.getPostParams( "reports" )?.step_key
        scopes:
          report:
            from: undefined
            to:   undefined
          sent:
            from: undefined
            to:   undefined
          not_sent: SessionStorageService.getPostParams( "reports" )?.scopes?.not_sent

  $scope.initFilter()
  $scope.$watchGroup [ 'inputReport.from', 'inputReport.to', 'inputSentReport.from', 'inputSentReport.to', 'displayOptions.query' ],
    ( [ inputReportFrom, inputReportTo, inputSentReportFrom, inputSentReportTo ] ) ->
      $scope.postParams.options.scopes.report.from = inputReportFrom
      $scope.postParams.options.scopes.report.to   = inputReportTo
      $scope.postParams.options.scopes.sent.from   = inputSentReportFrom
      $scope.postParams.options.scopes.sent.to     = inputSentReportTo
      console.log inputReportFrom

      if inputReportFrom || inputReportTo || $scope.displayOptions.query
        $scope.filterActivated = true
      else
        $scope.filterActivated = false

, а вот часть haml: 

#sidebar

  %uib_tabset

    %uib_tab
      %search{ query: 'displayOptions.query' }
      .send-reports{ ng_if: "tabActive == 'reports'"}
        %button.btn-block.btn.btn-green.pull-right.btn-send-reports{ type: 'button',  ng: { click: 'sendAllReport()', disabled: 'count.reports == 0', if: 'filterActivated' }}
          {{ 'reports.btn_group.send_all' | translate: count }}

      .filter-container
        .row.filter-by-date
          %span{ ng_if: "tabActive == 'reports'"}
            {{ 'reports.filter_by_date.head'  | translate }}
          %span{ ng_if: "tabActive == 'sent_reports'"}
            {{ 'reports.sent_filter_by_date.head'  | translate }}
          %span{ ng_if: "tabActive == 'other_reports'"}
            {{ 'reports.others_filter_by_date.head'  | translate }}

этот код не дает хорошего результата: когдаСделайте фильтр даты с Фильтром по типу отчета, появится кнопка, С другой стороны, когда удалите фильтр даты и оставьте фильтр активным, отчет исчезнет, ​​кнопка исчезнет!

enter image description here enter image description here может кто-нибудь помочь с рефакторингом кода!спасибо.

...