jSonデータから動的な$ stateProvider状態を設定します

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" 
     } 
    ] 
} 

である。しかし、今、私はLOにそれを得ることに続行するか見当がつかない広告を$ stateproviderに追加します。これも可能ですか？ ありがとう！

Answer 1

それが不明確と醜いことを行いますが、あなたはこの道を行くにしたい場合は、例を作業はここにあるので、私は、このアプローチを好まない：

var json_form = { 
 
\t "title": "Form title", 
 
    "alias": "form" , 
 
    "defaultPage": "name", 
 
\t "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" 
 
    } 
 
\t ] 
 
} 
 
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' 
 
    }); 
 
\t json_form.pages.forEach(function(page, index) { 
 
\t \t $stateProvider.state(json_form.alias + '.' + page.alias, { 
 
\t \t \t url: '/' + page.alias, 
 
\t \t \t template: '<h3>' + page.title + '</h3><input type="text" ng-model="' + json_form.alias + 'Data.' + 
 
\t \t \t page.alias + '"><a ui-sref="' + json_form.alias + '.' + page.sref + '">next</a>', 
 
\t \t \t controller: json_form.alias + 'Ctrl' 
 
\t \t }); 
 
\t }); 
 
    $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>