在Angularjs和Ionic中动态创建表单

时间:2016-09-06 12:10:24

标签: javascript html angularjs

我最近开始将纯jquery移动应用程序转换为angularjs和ionic。然而,有一件事我正在努力弄清楚,那就是如何创造一个真正的动态形式。我见过使用ng-repeat的例子,你可以动态添加一种输入。但是我构建的表单来自服务器,因此我需要根据从服务器检索的信息动态添加任意数量和不同类型的输入组合(日期,下拉列表,文本等)。有谁知道我在哪里可以找到如何做到这一点的例子? 以下是我的jquery移动代码示例,可让您了解我要实现的目标:

if (field.Display_Type == "Combo" || field.Display_Type== "LocationIndexLookup" || field.Display_Type == "Country" || field.Display_Type== "UserLookup"||field.Display_Type=="CustomDataLookup")
    { addCombo(div, field); }

    else if(field.Display_Type=="Checkbox")
    { addCheckbox(div, field);}

    else if (field.Display_Type == "MultiValue")//Check multicombo
    { addMultiCombo(div, field); }

    else if (field.Display_Type == "Text")
    { addText(div, field); }

    else if (field.Display_Type == "Date")
    { addDate(div, field); }

    else if (field.Display_Type=="DateTime")
    {addDateTime(div,field); }

    else if (field.Display_Type == "Notes")
    { addNote(div, field); }

    else if(field.Display_Type=="Numeric")
    { addNumeric(div, field); }

    else if (field.Display_Type =="Time")
    { addTime(div, field); }

    else if (field.Display_Type== "ContactsLookup"||field.Display_Type=="RecordDataLookup")
    {
        addContact(div, field);
    }

    else if (field.Display_Type=="Rating")
    { addRating(div, field) }

    else if(field.Display_Type=="Signature")
    { addSignature(div, field); }

    else if(field.Display_Type=="Hidden") 
    {
        //alert("hidden");
    }

    else if(field.Display_Type=="ProjectsLookup")
    {
        addProjectsLookup(div, field);
    }

    else if (field.Display_Type=="DocumentsLookup")
    {
        addDocumentsLookup(div, field);
    }

    else 
    { addText(div, field); }

    if(field.HelpNotes!=null && field.HelpNotes!="")
    { addHelpNote(div, field);}

}

每个调用一个函数来添加适当的dom元素,例如:

function addCombo(div, data) {
$("#" + div).append("<b style=\"align:left !important; text-align:left !important;\">" + data.Caption + ": <br> <Select id=\"Field" + data.OwnID + "\" class=\"" + data.Required + "\"></Select>").trigger("create");
$("#Field" + data.OwnID).append($('<option>', {
    value: "",
    text: ""
})).trigger("create");
for (i in data.Options) {
    //display the data in the key-value pair
    $("#Field" + data.OwnID).append($('<option>', {
        value: data.Options[i].Value,
        text: data.Options[i].Caption
    })).trigger("create");
}
$("#Field" + data.OwnID).selectmenu("refresh");

}

添加的某些字段具有我编码的自定义行为,因此我不想将现有的表单构建器库用于角度。

提前致谢

0 个答案:

没有答案