Question

我必须在角度构建一堆多步形式，并试图简化过程。我想做的是通过json数据动态生成每个步骤（状态）。每一步都有一个非常基本的布局，只是一个输入字段。因此，我理想情况下甚至会动态创建模板。

这就是我所拥有的实际工作简单形式：

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';
});

我有这个循环读取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;
    }
});

最后这是我的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"
        }
    ]
}

但现在我不知道如何继续加载到$ stateprovider。这甚至可能吗？谢谢！

Answer 1

我不喜欢这种方法，因为它做的事情不清楚和丑陋，但如果你想这样做，那么工作的例子就在这里：

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>

从jSon数据设置动态$ stateProvider状态

1 个答案: