I'm using angularJS with coffeescript syntax in the development of my project, I want to display a button only when applying some filter( search by name, by date , by type ..), you find attached screen chots that describe better the situation.
here is the angularjs part :
@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
and here the haml part :
#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
.filter-container
.row.filter-by-date
%span{ ng_if: "tabActive == 'reports'"}
reports.filter_by_date.head
%span{ ng_if: "tabActive == 'sent_reports'"}
reports.sent_filter_by_date.head
%span{ ng_if: "tabActive == 'other_reports'"}
reports.others_filter_by_date.head
this code does not give a good result : when make the date filter with Filter by report type the button appear , On the other hand when remove date filter and leave the filter report type activated the button disappear !
can some one give some help to refactor the code ! thanks.
Aucun commentaire:
Enregistrer un commentaire