I have to build a bunch of multi-step forms in angular and am trying to simplify the process. What I would like to do is have each step (state) produced dynamically via json data. Each step has a very basic layout just an input field. Because of this I would ideally have even the template created dynamically.
我必须在角度构建一堆多步形式,并试图简化过程。我想要做的是通过json数据动态生成每个步骤(状态)。每一步都有一个非常基本的布局,只是一个输入字段。因此,我理想情况下甚至会动态创建模板。
this is what I have as far as an actual working simple form:
这就是我所拥有的实际工作简单形式:
angular.module('formApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
template: '<div>{{formData}}</div><ui-view></ui-view>',
controller: 'formCtrl'
})
.state('form.name', {
url: '/name',
template: '<h3>{{title}}</h3><input type="text" ng-model="formData.name"><a ui-sref="form.phone">next</a>',
controller: 'nameCtrl'
})
.state('form.phone', {
url: '/phone',
template: '<h3>{{title}}</h3><input type="text" ng-model="formData.phone"><a ui-sref="form.zip">next</a>',
controller: 'phoneCtrl'
})
.state('form.zip', {
url: '/zip',
template: '<h3>{{title}}</h3><input type="text" ng-model="formData.zip">',
controller: 'zipCtrl'
});
$urlRouterProvider.otherwise('/form/name');
})
.controller('formCtrl', function($scope){
$scope.formData = {};
})
.controller('nameCtrl', function($scope){
$scope.title = 'Please Enter your Name';
})
.controller('phoneCtrl', function($scope){
$scope.title = 'Please Enter your Phone Number';
})
.controller('zipCtrl', function($scope, $http){
$scope.title = 'Please Enter your ZipCode';
});
And I have this loop that reads the json data, it works and console.logs exactly what I need
我有这个循环读取json数据,它工作和console.logs正是我需要的
$http.get('data.json').then(function(res){
var pages = res.data.pages;
for(page of pages){
var title = page.title;
var alias = page.alias;
var sref = page.sref;
var dynamicString = '.state("form.' + alias + '", {' +
'url: ' + alias + ',' +
'template: ' +
'<h3>' + title + '</h3>' +
'<input type="text" ng-model="formData.' + alias + '">' +
'<a ui-sref="' + sref + '">next</a>",' +
'controller: ' + alias +
'})' + dynamicString;
}
});
Finally here is my json
最后这是我的json
{ "pages":
[
{
"title": "Whats Your Name?",
"alias": "name",
"sref": "phone"
},
{
"title": "Whats Your Phone Number?",
"alias": "name",
"sref": "zip"
},
{
"title": "Whats Your Zip Code?",
"alias": "zip",
"sref": "redirect"
}
]
}
But now I have no idea how to proceed in getting it to load into the $stateprovider. Is this even possible? Thanks!
但现在我不知道如何继续加载到$ stateprovider。这有可能吗?谢谢!
1 个解决方案
#1
0
I dont like this approach, because it does things unclear and ugly, but if you want to go this way, working example is here:
我不喜欢这种方法,因为它做的事情不清楚和丑陋,但如果你想这样做,工作的例子在这里:
var json_form = {
"title": "Form title",
"alias": "form" ,
"defaultPage": "name",
"pages" : [
{
"title": "Whats Your Name?",
"alias": "name",
"sref": "phone"
},
{
"title": "Whats Your Phone Number?",
"alias": "phone",
"sref": "zip"
},
{
"title": "Whats Your Zip Code?",
"alias": "zip",
"sref": "redirect"
}
]
}
document.getElementById('app').setAttribute("ng-app", json_form.alias + "App");
angular.module(json_form.alias + 'App', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state(json_form.alias, {
url: '/' + json_form.alias,
template: '<h1>' + json_form.title + '</h1><div ui-view></div>',
controller: json_form.alias + 'Ctrl'
});
json_form.pages.forEach(function(page, index) {
$stateProvider.state(json_form.alias + '.' + page.alias, {
url: '/' + page.alias,
template: '<h3>' + page.title + '</h3><input type="text" ng-model="' + json_form.alias + 'Data.' +
page.alias + '"><a ui-sref="' + json_form.alias + '.' + page.sref + '">next</a>',
controller: json_form.alias + 'Ctrl'
});
});
$urlRouterProvider.otherwise('/' + json_form.alias + '/' + json_form.defaultPage);
})
.controller(json_form.alias + 'Ctrl', function($scope, $location){
$scope[json_form.alias + 'Data'] = $scope[json_form.alias + 'Data']||{};
});
<div id="app"><div ui-view></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
#1
0
I dont like this approach, because it does things unclear and ugly, but if you want to go this way, working example is here:
我不喜欢这种方法,因为它做的事情不清楚和丑陋,但如果你想这样做,工作的例子在这里:
var json_form = {
"title": "Form title",
"alias": "form" ,
"defaultPage": "name",
"pages" : [
{
"title": "Whats Your Name?",
"alias": "name",
"sref": "phone"
},
{
"title": "Whats Your Phone Number?",
"alias": "phone",
"sref": "zip"
},
{
"title": "Whats Your Zip Code?",
"alias": "zip",
"sref": "redirect"
}
]
}
document.getElementById('app').setAttribute("ng-app", json_form.alias + "App");
angular.module(json_form.alias + 'App', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state(json_form.alias, {
url: '/' + json_form.alias,
template: '<h1>' + json_form.title + '</h1><div ui-view></div>',
controller: json_form.alias + 'Ctrl'
});
json_form.pages.forEach(function(page, index) {
$stateProvider.state(json_form.alias + '.' + page.alias, {
url: '/' + page.alias,
template: '<h3>' + page.title + '</h3><input type="text" ng-model="' + json_form.alias + 'Data.' +
page.alias + '"><a ui-sref="' + json_form.alias + '.' + page.sref + '">next</a>',
controller: json_form.alias + 'Ctrl'
});
});
$urlRouterProvider.otherwise('/' + json_form.alias + '/' + json_form.defaultPage);
})
.controller(json_form.alias + 'Ctrl', function($scope, $location){
$scope[json_form.alias + 'Data'] = $scope[json_form.alias + 'Data']||{};
});
<div id="app"><div ui-view></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>