Need to call ng-switch by url or $location

Question

I am trying to use a url to call a tab element. For example, a url like: localhost:9000/widget&view=map will land on the page with the map tab selected and shown the map tab body.

<div class="search-result-tab" ng-init="selectTab='list'">
    <ul class="nav tab-header">
        <li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
            <a href={{listTabURL}}>List</a>
         </li>
         <li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
             <a href={{mapTabURL}}>Map</a>
         </li>
      </ul>
      <div class="tab-body" ng-switch on="selectTab">
          <div class="tab-content" ng-switch-when="list">
              <div ng-include="'list.html'"></div>
          </div>
          <div class="tab-content" ng-switch-when="map">
              <div ng-include="'map.html'"></div>
          </div>
     </div>
 </div>

Other urls are:

list: localhost:9000/widget&view=list
map: localhost:9000/widget&view=map

You might want to look into using something like [ui-router](https://github.com/angular-ui/ui-router) which can handle state management and url matching for you! — Ben Heymink, Jun 02 '15 at 13:56
@BenHeymink thanks for the suggestion, however we are not using ui-router for this stage so is there any other way can achieve this? — Willy, Jun 03 '15 at 23:42

score 0 · Answer 1 · edited May 23 '17 at 12:21

Similar question here. One suggestion is to inject the $location service and switch on $location.path, might be worth a try if you are not going to try ui-router (which you really should look into!)

function Ctrl($scope, $location) {
  $scope.pagename = function() { return $location.path(); };
};

<div id="header">
  <div ng-switch on="pagename()">
    <div ng-switch-when="/home">Welcome!</div>
    <div ng-switch-when="/product-list">Our products</div>
    <div ng-switch-when="/contact">Contact us</div>
  </div>
</div>

Need to call ng-switch by url or $location

1 Answers1