我周一 - 周日有一个tabset,我想在点击任何标签时加载一个不同的部分文件。我如何在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>
我的部分文件sundayPartial.html
<div>
<h3>Sunday Here</h3>
</div>
所以基本上当我点击星期日标签时,它应该在星期日的标签下加载sundayPartial.html
我的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'
})
});
任何帮助表示赞赏。感谢
答案 0 :(得分:0)
你试过了吗?
<div ng-include src="'sundayPartial.html'"></div>
答案 1 :(得分:0)
听起来你只需要一些基本的路由。您可以使用内置的角度路由或更高级的内容,例如ui-router
答案 2 :(得分:0)
我建议所有日子都写一条路线
<强>代码强>
$scope.days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sundays"];
<强>标记强>
<tabset justified="true">
<tab ng-repeat="day in days" heading="{{day}}">{{day}}</tab>
</tabset>
<div ng-view></div>
<强>路线强>
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/cleaning_services/homepage.html',
controller: 'CleaningServicesCtrl'
})
.when('/:day', {
templateUrl: 'views/cleaning_services/day.html',
controller: 'dayCtrl'
})
});