javascript - How to show one div on click and hide others on click using ui-route? -
my js: var app = angular.module("dashboardapp", ["ngmaterial", "nganimate", "ngsanitize", "ui.bootstrap", "ngaria", "ui.router", "datatables", "gridshore.c3js.chart"]); app.config(function($stateprovider, $urlrouterprovider, $locationprovider){ $locationprovider.hashprefix(''); $urlrouterprovider.otherwise('/systems'); $stateprovider .state('systems',{ url:"/systems", templateurl: 'pages/systems.html' }) .state('summary', { url:"/summary", controller:"maxectrl", templateurl: 'pages/summary.html' }); }); app.run(function($rootscope, $location, $anchorscroll, $stateparams, $timeout) { $rootscope.$on('$statechangesuccess', function(newroute, oldroute) { $timeout(function() { $location.hash($stateparams.scrollto); $anchorscroll(); }, 100); }); }); here trying inject $anchorscroll , scroll element id found in $location.hash() ----> in case here incident.
page1:
<div class="system_row2"> <div class="col-sm-3">today incident's:</div> <div class="col-sm-9 "> <div class="col-sm-12"> <a ui-sref="summary({scrollto:'incident'})"> </a> </div> page2: using accordion here , providing id="incident" scroll element.
<div id="abc"> div 1 </div> <div uib-accordion-group id="incident" class="panel-default"> <uib-accordion-heading> <div class="accordion_heading">incidents</div> </uib-accordion-heading> <uib-accordion-body> </uib-accordion-body> <table> </table> </div> mycontroller:
app.controller("maxectrl", ["$scope", "maxeservice", "dtoptionsbuilder", "$timeout", function($scope, maxeservice, dtoptionsbuilder, $timeout) { console.log("angular: maxectrl in action") $scope.oneatatime = true; $scope.status = { isfirstopen: true, issecondopen: true }; i want div id="incident" displayed when user clicks on "summary({scrollto:'incident'})" , other div id="abc" should hide.
appreciate kind of in advance.
i think looking named views. check here
https://github.com/angular-ui/ui-router/wiki/multiple-named-views
sample above link
<!-- index.html --> <body> <div ui-view="filters"></div> <div ui-view="tabledata"></div> <div ui-view="graph"></div> </body> routing
$stateprovider .state('report',{ views: { 'filters': { templateurl: 'report-filters.html', controller: function($scope){ ... controller stuff filters view ... } }, 'tabledata': { templateurl: 'report-table.html', controller: function($scope){ ... controller stuff tabledata view ... } }, 'graph': { templateurl: 'report-graph.html', controller: function($scope){ ... controller stuff graph view ... } } } }) for ui-router >=1.0 check here https://ui-router.github.io/guide/views#multiple-named-uiviews
Comments
Post a Comment