javascript - AngularJS:在 AngularJS 中动态生成表单

Question

我正在尝试生成 HTML 表单。

我有一个对象，其中包含表单元素数组，例如

{
    "formFields": [
        {
            "type": "select",
            "label": "Fabric",
            "name": "fabric",
            "options": [
                "Georgette",
                "Crepe",
                "Net",
                "Lace"
            ]
        },
        {
            "type": "text",
            "label": "Weight",
            "name": "weight",
            "options": []
        }
    ]
}

我想生成一个具有与上述对象一致的字段的表单，即它应该生成一个带有下拉选项“Georgette”、“Crepe”、“Net”、“Lace”的选择标记织物以及一个输入元素输入带有标签“重量”的文本。

在 AngularJS 中执行此操作的最佳方法是什么？

Answer 1

我会创建一个指令，它接受表单字段对象作为输入，并使用 $compile 作为基于输入的模板。

HTML:

<div my-input="settings"></div>

Js:

angular.module('myApp').directive('myInput', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        require: 'ngModel',
        link: linkFn,
        scope: {
            config: '=myInput'
        }
    };

    function linkFn($scope, $element, $attrs, ngModelCtrl) {
        init();

        function init() {
            $scope.model = {};
            var template = getTemplate();

            template.attr('ng-model', 'model.value');

            $compile(template)($scope, function(clonedElem) {
                $element.html(clonedElem);
            });
        }

        function getTemplate() {
            switch($scope.config.type) {
                case 'text':
                    return '<input type="text"/>';
                case 'select':
                    return '<input type="select" ng-options="option in config.options">';
            }
        }
    }
}]);

这是我的想法，所以代码可能是错误的，但你明白了。