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

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more