AngularJS multi page form using Tab

Question

Hello I am trying to implement a multistage form using Tab of angularJS. I don't want to use route in this application.

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;
        //Does not recognize this action
        console.log(this.tab);
// Not Working
        this.tab = 2;
// Not working setTab(2);

      },
      function (error) {
        console.log("It was broken !");
      });
  }
}]);

Then in HTML I am doing following:

  <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>
// Similarly other tabs....

The problem is: Tabs are changing nicely in on click(ng-click) event. But As I want to change the tabs on success of post event in controller function, Its not working :(

Looking forward to get some support. P.S. I am new in AngularJS.

Mathew Berg · Accepted Answer · 2014-06-16 12:42:34Z

2

It's because the "this" in your promise then function doesn't refer to the "this" in your controller. Create a new variable that you can reference this with and then use that in the return function. In this example I've named that variable rootThis:

app.controller('createProjectController', ['$scope', 'resourceProject', function ($scope, resourceProject) {

    this.tab = 1;

    var rootThis = this;

    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;
                //Does not recognize this action
                console.log(rootThis.tab);
                // Not Working
                rootThis.tab = 2;
                // Not working setTab(2);

            },
            function (error) {
                console.log("It was broken !");
            });
    }
}]);

answered Jun 16, 2014 at 12:42

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muffin Over a year ago

Solved the problem! Thank you.

Collectives™ on Stack Overflow

AngularJS multi page form using Tab

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related