使用angularjs进行多阶段表单处理

Question

我在不同的选项卡中有两个表单，我将值存储在一个公共JSON对象中。

现在我可以获得第一个标签表单值。如果我点击第二个标签，请继续＆＃39;按钮，第一个选项卡式表单值的值变为空白。

controller.js

    $scope.custDetailsObj = {
          "personalDetails":{
            "firstname":"",
            "lastname":""
          },
          "Idproof":{
            "idtype": "",
            "idnum": "",
            "doi": ""
          }      
        };

$scope.continueBtn = function(){
      console.log($scope.custDetailsObj);
      $ionicTabsDelegate.select(1);
    };

Firt选项卡内容

    <label class="item item-input">
        <span class="input-label">First Name:</span>
        <input type="text" data-ng-model="custDetailsObj.personalDetails.firstname" name="firstname" />                 
    </label>
     <label class="item item-input">
        <span class="input-label">Last Name:</span>
        <input type="text" data-ng-model="custDetailsObj.personalDetails.lastname" name="lastname">
     </label>
<button type="submit" class="button button-full button-positive" ng-click="continueBtn()">Continue</button>

第二个标签内容

    <label class="item item-input">
                <span class="input-label">ID Type:</span>
                <input type="text" value="" data-ng-model="custDetailsObj.Idproof.idtype" name="idtype"/>
              </label>  
              <label class="item item-input">
                <span class="input-label">ID Number:</span>
                <input type="text" value="" data-ng-model="custDetailsObj.Idproof.idnum" name="idnum"/>
              </label>
<button type="submit" class="button button-full button-positive" ng-click="continueBtn()">Continue</button>

Answer 1

我认为$ ionicTabsDelegate.select（1）;正在刷新您的控制器，因此您的数据丢失，保持数据的一种方法是使用服务

示例：

angular.module('yourmodule')
.service('Data', function() {
    var personalDetails;

    var Idproof;

    this.getPersonalDetails = function() {
        return this.personalDetails;
    }

    this.getIdproof = function() {
        return this.Idproof;
    }

    this.setPersonalDetails = function(personalDetails) {
        this.personalDetails = personalDetails;
    }

    this.setIdproof = function(Idproof) {
        this.Idproof = Idproof;
    }
});

然后你在控制器中使用你的服务并使用getter和setter