Question

我想使用这个库（angular-dynamic-forms）从我的JSON数据生成动态表单

所以这是我的HTML文件

<!doctype html>
<html ng-app="app" id="ng-app">
    <head>
        <title>Hello form</title>
    </head>

    <body ng-controller="AppCtrl" ng-cloak="">
        <dynamic-form class="col-md-12" 
            template="stdFormTemplate" 
            ng-model="stdFormData">
        </dynamic-form>

        <script src="./libs/angularjs/1.0.8/angular.min.js"></script>
        <script src="./libs/components/dynamic-forms.js"></script>
        <script src="./controller/dynamic-forms.js"></script>
    </body>
</html>

现在，如果我有这样的控制器，一切正常，我的表格

(function(){
    var app = angular.module('app', ['dynform']);
    app.controller('AppCtrl', function ($http, $scope) {
        $scope.stdFormTemplate = [
            {
                "type": "text",
                "model": "name.first",
                "label": "Last Name",
            },
            {
                "type": "text",
                "label": "Last Name",
                "model": "name.last",
            },
            {
                "type": "email",
                "label": "Email Address",
                "model": "email",
            },
            {
                "type": "submit",
                "label": "submit",
                "model": "submit",
            }
        ];

        $scope.stdFormData = {
            "name": {
                "first": "Saman",
                "last": "Shafigh"
                },
            "email": "saman@gmail.com"
        };            
    });
})();

但是当我想使用动态JSON数据时，它不起作用。例如，我有一个API服务，它返回像这样的

的JSON内容

{"form":{
     "template":[
          {"type":"text","model":"title","label":"","required":true},
          {"type":"textarea","model":"description","label":"","required":true},
          {"type":"number","model":"price","label":"","required":true},
          {"type":"choice","model":"available","label":"","required":true}],
     "data":{"title":"","description":"","price":"","available":"1"}}
 }

然后我想用这个JSON动态生成我的表单，我的代码是这样的

(function(){
    var app = angular.module('app', ['dynform']);

    app.controller('AppCtrl', function ($http, $scope) {
        $http.get('../api/product/form').
            success(function(data) {
                $scope.stdFormData = data.form.data;
                $scope.stdFormTemplate = data.form.template;
            });   
    });
})();

即使以下代码也无效（仅供测试）。

(function(){
    var app = angular.module('app', ['dynform']);
    app.controller('AppCtrl', function ($http, $scope) {
        $http.get('../api/product/form').
            success(function(data) {
                $scope.stdFormTemplate = [
                    {
                        "type": "text",
                        "model": "name.first",
                        "label": "Last Name"
                    },
                    {
                        "type": "text",
                        "label": "Last Name",
                        "model": "name.last"
                    },
                    {
                        "type": "email",
                        "label": "Email Address",
                        "model": "email"
                    },
                    {
                        "type": "submit",
                        "label": "submit",
                        "model": "submit"
                    }
                ];

                $scope.stdFormData = {
                    "name": {
                        "first": "Saman",
                        "last": "Shafigh"
                        },
                    "email": "saman@gmail.com"
                };            

        });   
    });
})();

我认为当我在一个有一些延迟的动作中初始化它时，表单没有被初始化。

Answer 1

我尝试这样的事情并且对我有用，我已经用#danhunsaker证实了这个模块的主要贡献，目前这是最好的解决方案。

在我的HTML中，我有类似

的内容

<div id="my-form"></div>

然后在控制器中我有

(function(){
    var app = angular.module('app', ['dynform']);

    app.controller('AppCtrl', function ($http, $compile, $scope) {
        $http.get('../api/product/form/1').
            success(function(data) {
                $scope.stdFormData = data.form.data;
                $scope.stdFormTemplate = data.form.template;

                var element = angular.element(document.getElementById("my-form"));
                element.html('<dynamic-form class="col-md-12" template="stdFormTemplate" ng-model="stdFormData"></dynamic-form>');
                $compile(element.contents())($scope);                
            });   
    });
})();

如何使用带动态JSON数据的angular-dynamic-forms在AngularJS中生成表单

1 个答案: