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

이다하지만 지금은 어떻게 보라에 점점 진행하는 아무 생각이 없다 광고를 $ 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>