How to display the tab selection results in same page?
I have stacked 3 tabs in my page and the resulting html pages are loaded in new page instead of loading in the same page.
I followed the below sample and its working fine till the part its explained. https://codepen.io/jasoncluck/pen/iDcbh
I have mentioned my URL path in href attribute of anchor tag. Ex:
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href="/tabl">Tab1</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="/tab2">Tab2</a>
</li>
<li ng-class="{'active': view_tab == 'tab3'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="/tab3"> Tab3 </a>
</li>
</ul>
and below is my router part
.when('/tabl', {
controller : 'URLController',
templateUrl : './views/URL.html'
})
I can see my controller and templateURL is loaded but in the different page. If not possible with href then please share me ideas to follow.
<div ui-view></div>
is the rescuer...
This will render the child state inside your parent state template.