As a beginner in Angular, I'm seeking some guidance!
I have a webpage with three tabs (using Angular Material for tab functionality) that display different sets of records. Each tab should show records based on their status (e.g., OPEN tab displays 'Open' status records, CLOSED tab shows 'Closed' status records, etc.):
<div ng-controller="SomeController as someCtrl">
<md-content>
<md-tabs>
<md-tab id="tab1" >
<md-tab-label>OPEN</md-tab-label>
<md-tab-body>
<div ng-view></div>
</md-tab-body>
</md-tab>
<md-tab id="tab2" md-on-select="someCtrl.showTaskListing('Error')">
<md-tab-label>EXCEPTIONS</md-tab-label>
<md-tab-body>
<div ng-view></div>
</md-tab-body>
</md-tab>
<md-tab id="tab3" md-on-select="someCtrl.showTaskListing('Closed')">
<md-tab-label>CLOSED</md-tab-label>
<md-tab-body>
<div ng-view></div>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
Below is the controller code (RequestSenderService acts as a utility service for $http operations):
angular
.module('SomeModule')
.controller('SomeController', someController);
function SomeController($scope, $location, $http, RequestSenderService) {
showTaskListing('Incomplete');
function showTaskListing(status) {
var httpResponsePromise = RequestSenderService.sendRequest("/getTasks?status=" + status);
httpResponsePromise.then(
function (response) {
setTimeout(function () {
$scope.$apply(function () {
$scope.tasks = response.data;
for (task in this.tasks) {
task.isSelected = true;
}
}
)
}, 1000);
}
)
}
Routing configuration:
angular.module("SomeModule",["ngRoute","ngMaterial"])
.config(function($routeProvider){
$routeProvider
.when("/tasks", {
templateUrl : "js/tasklist/tasklist.partial.html",
controller : "SomeController as someCtrl"
})
.when("/addTask", {
templateUrl : "js/taskDetails.partial.html",
controller : "AnotherController as anotherCtrl"
})
.otherwise( {
redirectTo : "/tasks"
})
}) ;
Template:
<div>
<table style="width:100%">
<tr>
<th>Task Name</th>
<th>Description</th>
<th>Type</th>
</tr>
<tr ng-repeat="task in tasks">
<td ng-bind="task.title"></td>
<td ng-bind="task.description"></td>
<td ng-bind="task.type"></td>
</tr>
</table>
</div>
When loading the page (/tasks), data loads correctly on the first tab, but all tabs display the same data without refreshing when switching between them using md-on-select. Any help would be appreciated. Thanks.