I have a tabset Monday - Sunday and i want to load a different partial file when any of the tabs are clicked. How do i do this in AngularJS
<div ng-controller='CleaningServicesCtrl' ng-init= 'getlocations()'>
<div class="container">
<div class="btn-group" dropdown>
<button type="button" class="btn ">Select Your Location</button>
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="perlocation in locations"><a ng-click='loadCalendar(perlocation)'>{{perlocation.name}}</a></li>
</ul>
</div>
<div>
<tabset justified="true">
<tab heading="Sunday"></tab>
<tab heading="Monday">Monday</tab>
<tab heading="Tuesday">Tuesday</tab>
<tab heading="Wednesday">Wednesday</tab>
<tab heading="Thursday">Thursday</tab>
<tab heading="Friday">Friday</tab>
<tab heading="Saturday">Saturday</tab>
</tabset>
</div>
</div>
</div>
my partial file sundayPartial.html
<div>
<h3>Sunday Here</h3>
</div>
So basically when i click on Sunday tab, it should load the sundayPartial.html
under the tab Sunday
My app.js
angular
.module('letsSchedulecommyApp', [
'ngCookies',
'ngResource',
'ngRoute',
'ui.bootstrap',
'ui.calendar',
'ngSanitize'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/cleaning_services/homepage.html',
controller: 'CleaningServicesCtrl'
})
});
Any help appreciated. Thanks
Have you tried:
<div ng-include src="'sundayPartial.html'"></div>
?
Sounds like you just need some basic routing. You can use the built-in angular routing or something more advanced, like ui-router
I'd suggest write a single route for all days
Code
$scope.days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sundays"];
Markup
<tabset justified="true">
<tab ng-repeat="day in days" heading="{{day}}">{{day}}</tab>
</tabset>
<div ng-view></div>
Route
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/cleaning_services/homepage.html',
controller: 'CleaningServicesCtrl'
})
.when('/:day', {
templateUrl: 'views/cleaning_services/day.html',
controller: 'dayCtrl'
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.