Javascript 爱奥尼亚公司；角JS-如何做一个多步骤的形式？_Javascript_Angularjs_Ionic Framework

Javascript 爱奥尼亚公司；角JS-如何做一个多步骤的形式？

javascript angularjs ionic-framework

Javascript 爱奥尼亚公司；角JS-如何做一个多步骤的形式？,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我在Google中搜索了很多关于在Ionic中执行多步骤表单的解决方案（在一个视图中）我希望所有的数据将在最后检索到只有一个提交按钮为我的数据库（我使用Firebase）我没有找到解决方案，我做了很多测试，但没有成功。。。谢谢你的时间编辑：我已经测试了幻灯片解决方案，但“下一步”按钮不起作用。。。这是我的密码 HTML: <ion-slide-box> <form style="height:100%;" ng-submit="submitEvent(event)"&g

我在Google中搜索了很多关于在Ionic中执行多步骤表单的解决方案（在一个视图中）

我希望所有的数据将在最后检索到只有一个提交按钮为我的数据库（我使用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>

)

服务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显示/隐藏解决方案非常感兴趣。。欢迎大家举个例子

谢谢

您是否考虑过使用某种状态变量（如

$step

）来使用

ng show

或

ng hide

动态显示/隐藏不同的表单元素

我怀疑您仍然可以在HTML中保留单个表单元素，但使用此变量可以引导用户浏览多组表单元素。当他们完成这些步骤时，他们将更新所需的

$scope

变量。最终提交按钮将仅在最后一步显示，并且能够使用在前面步骤中设置的所有变量

这实际上不是一个特定于爱奥尼亚的问题，因此这是一个普通的问题，但使用如下HTML模板：

<body ng-controller="ctrl">
  <h2>Multi-step form demo (on step {{data.step}})</h2>
  <form class="form-horizontal">
  <span ng-show="data.step == 1">
    <input id="value1" type="text" placeholder="Value1" ng-model="data.form.value1"/>
   </span>
  <span ng-show="data.step == 2">
    <input id="value2" type="number" placeholder="Value2" ng-model="data.form.value2"/>
   </span>
    <span ng-show="data.step == 3">
    <input id="value3" type="text" placeholder="Value3" ng-model="data.form.value3"/>
      <a ng-click="submit()">Submit form</a>
   </span>

    <a ng-click="nextStep()">Next</a>

  </form>

  <h2>Form data</h2>
  {{data.form}}

</body>

function ctrl($scope){
  $scope.data = {
    step: 1,
    form: {
      value1: undefined,
      value2: undefined,
      value3: undefined
    }
  }

  $scope.submit = function() {
    alert('form submitted');  
  }

  $scope.nextStep = function() {
    $scope.data.step += 1;
  }
}

…你可以开始得到你想要的。显然，您需要稍微清理一下代码，但这说明了这一点

下面是一个工作代码笔，它显示了这一点：

为什么不使用幻灯片框：

一旦他们在一页上填写了信息，他们就可以简单地滑到下一页上填写（都在同一个离子视图和同一个控制器中）。只需使用slide代理来处理slide:$ionicSlideBoxDelegate/

然后在最后一张幻灯片上，只要有一个提交按钮，就可以在输入上使用ng模型将值存储在对象中，例如

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

您的html将如下所示：

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

是的，这也行@YngDev31您还可以使用一些指令，如ng开关来显示和隐藏表单的某些部分。这看起来非常有趣！您必须给我举个例子吗？@YngDev31请查看我的更新答案以获得一个有效的例子。谢谢！而且是和一个完整的DIV一起工作？我想在每个步骤中隐藏一个字幕。是的，你可以使用标准的角度指令（如ng show或ng switch，如@JessPatton建议的）根据当前活动的步骤显示你需要的任何内容。此外，如果你想禁用滑动滑动滑动滑动，请在控制器中删除此功能，并在绑定控制器时运行它$scope.slidestop=函数（索引）{$ionicSlideBoxDelegate.enableSlide（false）；}；谢谢你抽出时间。我尝试过这个解决方案，但我不知道我可以把形式应答器放在哪里。当她在时，SlideBoxDelegate不工作，但事件存储在数据库中（带有空白字段）。当她离开时，我有一个错误，数据并没有存储在数据库中（但幻灯片工作）。我真的迷路了。。。lolwell我在一个公司的应用程序中使用了这个解决方案，它工作得非常好，你肯定还有其他一些与$scope相关的问题。除非您发布一些代码，否则“开启”无法帮助您解决问题。

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

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