javascript - Ionic & Angular JS - 如何做一个多步骤表单？

Question

我在 Google 中搜索了很多关于在 Ionic 中执行多步表单的解决方案(在一个 View 中)。

我希望我的数据库(我使用 Firebase)只在一个提交按钮中检索所有数据。

我没有找到解决方案，我测试了很多，但没有成功...... 感谢您的宝贵时间!

编辑:我已经测试了一个幻灯片解决方案，但是下一个按钮不起作用......这是我的代码。

HTML:

<ion-slide-box>
<form style="height:100%;" ng-submit="submitEvent(event)">
<button ng-click="slideNext()" style="positon:relative; top:90px;">Next</button>
<ion-slide class="has-header">

  <div style="border-bottom:none !important; background : transparent; text-align:center;">
  <i class="fa fa-edit fa-4x" id="iconstep-ajust"></i>
  <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px;  font-family: lobster;">L'événement</h4>
  </div>
  <img id="separation-step" src="img/line.png"></img>
  <div class="list" style="top:80px;">
  <label class="item item-input item-floating-label" style="border:none;">   
    <input type="text" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="Nom de l'événement" ng-model="event.nameid">
  </label>
  <label class="item item-input item-floating-label" style="border:none;">
    <textarea style="color:#FFF;font-size: 14px;text-align:center;background-color:rgba(255, 255, 255, 0);" placeholder="Description de l'événement" ng-model="event.descriptionid"></textarea>
  </label>
</div>
</ion-slide>

<ion-slide  class="has-header">
  <div style="border-bottom:none !important; background : transparent; text-align:center;">
  <i class="fa fa-clock-o fa-4x" id="iconstep-ajust"></i>
  <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px;  font-family: lobster;">Date/Heure</h4>
  </div>
  <img id="separation-step" src="img/line.png"></img>
  <div class="list" style="top:80px;">
  <label class="item item-input item-floating-label" style="border:none;">
    <input type="date" placeholder="EEE - MMM - yyyy" ng-model-options="{timezone: 'UTC'}" ng-model="event.startdateid" placeholder="Date de début">
  </label>
  <label class="item item-input item-floating-label" style="border:none;">
    <input type="time" placeholder="HH:mm:ss" ng-model-options="{timezone: 'UTC'}" ng-model="event.starthourid" placeholder="Heure de début">
  </label>
</div>
<button class="button button-positive" type="submit" value="Add Event" style="position: relative; top: 90px;">Add</button>

</ion-slide>

Controller JS:

myApp.controller('Step1Ctrl', ['$scope', 'Event', 'Auth', '$rootScope', '$state', '$firebaseArray', '$ionicSlideBoxDelegate', function($scope, Event, Auth, $rootScope, $state, $firebaseArray, $ionicSlideBoxDelegate) {

 $scope.slideNext = function() {

        $ionicSlideBoxDelegate.next();
    }

$scope.submitEvent = function(event) {

    var eventRef = new Firebase("https://myApp.firebaseio.com/Events");
    Event.add(event).then(function (data){ 
      $scope.event = [{userid : null, nameid: null, descriptionid: null, adressid: null, cpid: null, townid: null, startdateid: null, enddateid: null, starthourid: null, endhourid: null}];
     });

  }



  $scope.deleteEvent = function(index) {
    $scope.events.splice(index , 1);
  }

  $scope.auth = Auth;

    // any time auth status updates, add the user data to scope
    $scope.auth.$onAuth(function(authData) {
      $scope.authData = authData;
    });

    $scope.create = function() {
    $state.go('tabstep');
};
$scope.close = function() { 
     $state.go('tabdash'); 
};
}]

)

服务JS:

myApp.factory("Event", ["$firebaseArray", "$firebaseObject", function($firebaseArray, $firebaseObject) {
var eventRef = new Firebase('https://myApp.firebaseio.com/Events/');
var userRef = new Firebase('https://myApp.firebaseio.com/Users/');
var events = $firebaseArray(eventRef);

     var Event = {

         all: events,

         get: function (event){
          var eventInfo = $firebaseObject(eventRef);
          event.startdateid = new Date(event.startdateid);
          event.starthourid = new Date(event.starthourid);
                return $firebaseObject(eventRef.child('Events').child(userid));

              }
            ,
        add: function (event){
          var eventInfo = $firebaseArray(eventRef, userRef);
          event.userid = userRef.getAuth();
          event.startdateid = new Date(event.startdateid).toJSON();
          event.starthourid = new Date(event.starthourid).toJSON();
                return eventInfo.$add(event);
              }
       }
       return Event;

PS:我对 Ng-show/hide 解决方案非常感兴趣。欢迎举个例子!

谢谢!

Answer 1

为什么不直接使用滑动框: http://ionicframework.com/docs/api/directive/ionSlideBox/

一旦他们在一页上填写了信息，他们就可以简单地滑到下一页来填写(所有这些都在同一个 ionic View 和同一个 Controller 中)。只需使用幻灯片委托(delegate)来处理滑动:http://ionicframework.com/docs/api/service/ $ionicSlideBoxDelegate/

然后在最后一张幻灯片上有一个提交按钮，在你的输入上使用 ng-model 将值存储在一个对象中，例如

$scope.inputdata = {answerone: '', answertow: '', answerthree: ''}

您的 html 将如下所示:

<input ng-model="inputdata.answerone"></input>

然后在最后有一个提交按钮，它在 ng-click 上触发一个函数:

    $scope.submitdata = function(){
        var req = {
            url: yourposturl,
            method: "POST",
            data: $scope.inputdata
        }
        $http(req).success(callbackfuntion).error(callbackfunction).then(callbackfunction)
}