AngularJS从JSON数据动态表单（不同类型） [英] AngularJS dynamic form from json data (different types)

问题描述

我试图在使用从JSON数据AngularJS一个动态的形式。我有这样的工作：

I try to create a dynamic form in AngularJS using the data from a JSON. I have this working:

HTML

    <p ng-repeat="field in formFields">
            <input 
                dynamic-name="field.name"
                type="{{ field.type }}"
                placeholder="{{ field.name }}"
                ng-model="field.value"
                required
            >
            <span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>
            <span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.email">Not email!</span>
    </p>
    <button ng-disabled="myForm.$invalid">Submit</button>                 
</form>

JS

angular.module('angularTestingApp').controller('DynamicFormCtrl', function ($scope) {

$scope.formFields = [
    {
        name: 'firstName',
        type: 'text'
    },
    {
        name: 'email',
        type: 'email'
    },
    {
        name: 'password',
        type: 'password'
    },
    {
        name: 'secondName',
        type: 'text'
    }
];}).directive("dynamicName",function($compile){
return {
    restrict:"A",
    terminal:true,
    priority:1000,
    link:function(scope,element,attrs){
        element.attr('name', scope.$eval(attrs.dynamicName));
        element.removeAttr("dynamic-name");
        $compile(element)(scope);
    }
}});

这code ++工程，但问题是，我不知道如何添加动态复选框或清单，我怎么能验证的形式里面，像这样的：

This code works, but the question is that I dont know how to add dynamic checkbox or checklist and how can I validate inside the form, something like this:

angular.module('angularTestingApp')

.controller（'DynamicFormCtrl'，函数（$范围内）{

.controller('DynamicFormCtrl', function ($scope) {

$scope.formFields = [
    {
        name: 'firstName',
        type: 'text'
    },
    {
        name: 'email',
        type: 'email'
    },
    {
        name: 'password',
        type: 'password'
    },
    {
        name: 'city',
        type: 'checkbox',
        choices: [
            { name: "red" },
            { name: "blue" },
            { name: "green" },
        ]
    }
];})

感谢您提前为您的关注。
顺祝商祺！

Thank you in advance for your attention. Best Regards!

推荐答案

我已经解决了我的问题。

I have solved my problem.

此与AngularJS与验证动力形式的一个例子的plunkr链路

This a plunkr link with one example of Dynamic Forms with Validation in AngularJS

<一个href=\"http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=$p$pview\">http://plnkr.co/edit/kqiheTEoGDQxAoQV3wxu?p=$p$pview

祺！

这篇关于AngularJS从JSON数据动态表单（不同类型）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！