Question

您好我正在尝试使用angularJS的Tab实现多级表单。我不想在这个应用程序中使用路由。

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 !");
      });
  }
}]);

然后在HTML中我正在做以下事情：

  <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....

问题是：在点击（ng-click）事件中，标签的变化很好。但是，由于我想在控制器功能中更改后事件成功的标签，它不起作用：（

期待得到一些支持。附：我是AngularJS的新手。

Answer 1

这是因为＆＃34;这个＆＃34;在你的承诺中，功能并没有引用＆＃34;这个＆＃34;在你的控制器中。创建一个可以引用它的新变量，然后在返回函数中使用它。在这个例子中，我将变量命名为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 !");
            });
    }
}]);

使用Tab的AngularJS多页面表单

1 个答案: