我在我的项目开发中使用了带有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 }}
此代码效果不佳:当显示带有按报告类型过滤的日期过滤器时,按钮会出现;另一方面,当删除日期过滤器并保持过滤器报告类型处于激活状态时,按钮会消失!