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”的选择标记的Fabric和一个输入元素键入带有标签权重的文本。

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

这是我的头脑，所以代码可能是错的，但你明白了。

Answer 2

您可以参考示例here。请找到以下代码：

<强> HTML：

<div ng-app="app" ng-controller="test">
    <form name="myForm" ng-submit="validateForm(myForm.$valid)">
        <div ng-repeat="item in formData.formFields">
            <div ng-if="item.type == 'text'">
                <label>{{item.label}}: </label>
                <input type="{{item.type}}" name="{{item.name}}">
            </div>
            <div ng-if="item.type == 'select'">
                <label>{{item.label}}: </label>
                <select name="{{item.name}}">
                    <option ng-repeat="opt in item.options" value="{{opt}}">{{opt}}</option>
                </select>
            </div>
            <br>
        </div>
    </form>
</div>

<强> JS：

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

app.controller('test', function ($scope) {
    $scope.formData = {
        "formFields": [
            {
                "type": "select",
                "label": "Fabric",
                "name": "fabric",
                "options": [
                    "Georgette",
                    "Crepe",
                    "Net",
                    "Lace"
                ]
            },
            {
                "type": "text",
                "label": "Weight",
                "name": "weight",
                "options": []
            }
        ]
    };

$scope.validateForm = function(isValid){
 /*..*/
}
});

AngularJS：在AngularJS中动态生成表单

2 个答案: