AngularJS:应用动作时显示html元素

时间:2018-09-22 15:42:35

标签: angularjs if-statement filter coffeescript haml

我在我的项目开发中使用了带有coffeescript语法的angularJS,我只想在应用一些过滤器(按名称,按日期,按类型..进行搜索)时显示一个按钮,即可找到描述情况更好。

这是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 有人可以帮忙重构代码吗!谢谢。

0 个答案:

没有答案