Hello, I am currently working on implementing a multi-stage form using AngularJS Tabs. Instead of using routes in this application, I am trying to achieve the desired functionality solely through tabs.
app.controller('createProjectController', ['$scope', 'resourceProject', function ($scope, resourceProject) {
this.tab = 1;
this.setTab = function (newValue) {
this.tab = newValue;
};
this.isSet = function (tabName) {
return this.tab === tabName;
};
$scope.project = {};
$scope.postProject = function () {
// console.log("Post Here");
// $scope.project.Id = null;
resourceProject.postEvent().save($scope.project)
.$promise.then(
function (response) {
console.log("Saved");
//console.log(response);
$scope.project = response;
//Unable to change tab
console.log(this.tab);
// Not Working
this.tab = 2;
// Not working setTab(2);
},
function (error) {
console.log("It was broken !");
});
}
}]);
In the HTML, I have structured it as follows:
<section class="tab" ng-controller="createProjectController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active: tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Project Information</a>
</li>
<li ng-class="{ active: tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Further Information</a>
</li>
<li ng-class="{ active: tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Groups</a>
</li>
<li ng-class="{ active: tab.isSet(4) }">
<a href ng-click="tab.setTab(4)">Chart</a>
</li>
<li ng-class="{ active: tab.isSet(5) }">
<a href ng-click="tab.setTab(5)">Specification</a>
</li>
</ul>
@*First Tab Project Info*@
<div ng-show="tab.isSet(1)">
<h4>General Project Information</h4>
<div>.....General form...</div>
</div>
<div ng-show="tab.isSet(2)">
<h4>Further Information</h4>
<blockquote>And so on </blockquote>
</div>
// Other tabs follow similar structure....
The issue I am facing is that while the tabs are switching correctly with ng-click events, I am unable to change tabs successfully upon the completion of the post event in the controller function.
I would greatly appreciate any assistance or guidance. Note: I am relatively new to AngularJS.