问题描述
限时送ChatGPT账号..我正在尝试在 AngularJS 中找出合理的方法来创建一个由多个步骤(即向导)组成但链接到一个页面/URL 的函数.来自一个步骤的数据必须向下一步发送数据(或与之共享数据).
要点是:
所有步骤的 url 应保持不变(即http://mydomain/myapp/nameupdater
),并且,可以在步骤之间发送数据(即,我必须提供从步骤 1 中找到的数据以填充步骤 2 中的数据).例如,假设我有一个函数可以批量更新名称:
在步骤 1 中,该函数让您搜索名称.在第 2 步中,该函数会显示在第 1 步中找到的名称列表,并允许用户对其进行编辑.我开始了一种方法,其中每个步骤都有自己的视图和控制器.并且,angular-ui-router
维护了函数的状态.但是,我不知道如何在步骤之间共享数据.
有谁知道在 angularjs 中建立多步/向导表单的好方法吗?
我的 Plunker 代码在这里,这是我在这方面非常薄弱的尝试.
解决方案我认为最好的方法是使用 ng-switch
,只需一个控制器,一个路由,无需重新加载,使用在所有步骤中共享的变量,如下所示:
<div ng-switch="step"><div ng-switch-when="1"><!-- 在这里您可以包含您的第 1 步模板,或者只是在此处对其进行硬编码:--><div ng-include src="'.../step1.html'"><button ng-click="setStep(1)"></button><div ng-switch-when="2"><div ng-include src="'.../step2.html'"><button ng-click="setStep(2)"></button>
<div ng-switch-when="3"><div ng-include src="'.../step3.html'"><button ng-click="setStep(3)"></button>
yourApp.controller('stepCtrl',function($scope){$scope.step = 1;$scope.setStep = 函数(步骤){$scope.step = 步骤;}});
通过这种方式,您还可以操纵 URL 在当前位置的末尾添加一个步骤.
更新:
其实这个答案是很久以前的,现在我个人更喜欢使用 ui-router一个很棒的模块,您可以将其注入到您的 AngularJs 应用程序中,并通过嵌套视图使其更加酷.说到嵌套视图,下面是我对带有一些动画的多步表单的新方法:
第一:
使用 $stateProvider 在单独的视图中声明您想要的任何步骤:app.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('wizard', {//这将是我们向导的包装器网址:'/向导',templateUrl: 'wizard.html',控制器:'向导控制器'}).state('wizard.stepOne', {//这将是我们向导的包装器url: '/stepOne',templateUrl: 'stepOne.html',控制器:'向导控制器'}).state('wizard.stepTwo', {//这将是我们向导的包装器url: '/stepTwo',templateUrl: 'stepTwo.html',控制器:'向导控制器'})
然后在我们的 "wizard.html" 中我们可以有这样的东西:
<div><h2>我们的多步表单向导</h2><div id="status-buttons" class="text-center"><a ui-sref-active="active" ui-sref=".stepOne"><span>1</span>第一步<a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span>第二步</a><!-- 这里我们指定我们的视图,它是我们的子视图(步骤)的容器,在我们的例子中可以是一个表单!--><form id="signup-form" ng-submit="submit()"><!-- 嵌套状态视图将插入此处--><div ui-view></div></表单>
显然对于我们的步骤,我们必须有单独的 html 文件.这样,我们还有一个控制器,url会更新,我们也可以添加角度动画.
I'm trying to figure out reasonable approaches in AngularJS for creating a function that is composed of multiple steps (i.e., a wizard) but is linked to one page/URL. The data from one step would have to send data to (or share data with) the next step.
The main points are:
the url should remain the same (i.e.,http://mydomain/myapp/nameupdater
) for all of the steps and,
the data can be sent amongst steps (i.e., I have to give the data found from step 1 to populate the data in step 2).
For example, suppose that I have a function that does a bulk update of names:
In step 1 the function makes you search for a name. In step 2 the function presents a list of names that were found from step 1 and allows the user to edit them.I started an approach where each step had its own view and controller. And, the angular-ui-router
maintained the states of the function. But, I have no idea how I would share the data between the steps.
Does anyone know of a good approach to establishing multi-step/wizard forms in angularjs?
My Plunker code is here of my very weak attempt at this.
解决方案I think the best way of doing this would be to use ng-switch
, just one controller, one route, no reload, using variables shared in all steps, like this:
<div ng-controller="stepCtrl">
<div ng-switch="step">
<div ng-switch-when="1">
<!-- here you can include your step 1 template,
or simply just hardcode it here: -->
<div ng-include src="'.../step1.html'">
<button ng-click="setStep(1)"></button>
</div>
<div ng-switch-when="2">
<div ng-include src="'.../step2.html'">
<button ng-click="setStep(2)"></button>
</div>
<div ng-switch-when="3">
<div ng-include src="'.../step3.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
yourApp.controller('stepCtrl',function($scope){
$scope.step = 1;
$scope.setStep = function(step){
$scope.step = step;
}
});
This way you can also manipulate the URL to add a step at the end of your current location.
UPDATE :
Actually this answer is for long time ago , this days I personally prefer to use ui-router which is a great module which you can inject to your AngularJs application and make it even more cool with nested views . Speaking of nested views , bellow is my new approach for a multystep form with some animation :
First :
Using $stateProvider declare any steps you want in separate views :
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('wizard', {// this will be the wrapper for our wizard
url: '/wizard',
templateUrl: 'wizard.html',
controller: 'wizardController'
})
.state('wizard.stepOne', {// this will be the wrapper for our wizard
url: '/stepOne',
templateUrl: 'stepOne.html',
controller: 'wizardController'
})
.state('wizard.stepTwo', {// this will be the wrapper for our wizard
url: '/stepTwo',
templateUrl: 'stepTwo.html',
controller: 'wizardController'
})
Then later in our "wizard.html" we can have something like this :
<div id="container">
<div>
<h2>Our multistep form wizard</h2>
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a>
<a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a>
</div>
</div>
<!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !-->
<form id="signup-form" ng-submit="submit()">
<!-- nested state views will be inserted here -->
<div ui-view></div>
</form>
</div>
And obviously for our steps , we must have seperated html files. This way , we still have one controller , url will be updated , and we can also add angular animation .
这篇关于如何在一个页面/网址上做一个 angularjs 多步/向导表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论