小编Enr*_*cio的帖子

来自json数据的AngularJS动态表单(不同类型)

我尝试使用来自JSON的数据在AngularJS中创建动态表单.我有这个工作:

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>
Run Code Online (Sandbox Code Playgroud)

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);
    }
}});
Run Code Online (Sandbox Code Playgroud)

这段代码有效,但问题是我不知道如何添加动态复选框或核对表以及如何在表单内部进行验证,如下所示: …

javascript forms json dynamic-data angularjs

25
推荐指数
2
解决办法
4万
查看次数

标签 统计

angularjs ×1

dynamic-data ×1

forms ×1

javascript ×1

json ×1