[英]How to make a dynamic form from JSON in angular?
I am trying to make a form in angular using json. 我正在尝试使用json创建一个有角度的表单。 When I take a single json file it is easy, because I write my html and using iteration I display the form fields. 当我拿一个json文件时很简单,因为我编写了我的html并使用迭代我显示了表单字段。 Now if I have 3 or 4 json files I need to generate a different form with different ids and display it. 现在如果我有3个或4个json文件,我需要使用不同的id生成不同的表单并显示它。 Can I generate dynamic forms? 我可以生成动态表单吗?
I take two button which get json data from file "A" and "B". 我拿两个按钮从文件“A”和“B”获取json数据。 I need to show the different form on click. 我需要在点击时显示其他表格。
$scope.getFromAFile = function() {
// body...
var inputs=[];
$http.get('a.json')
.success(function (data) {
$scope.formInputs = data.input;
angular.forEach($scope.formInputs, function(value, key) {
/* do something for all key: value pairs */
inputs.push({
"value": value.value,
"inputValues": value.inputValues,
"type": value.inputType.toLowerCase(),
"name": value.name,
"required": value.required
})
});
getFormfromData(inputs,'BID');
})
.error(function(err){
alert(err);
});
}
$scope.getFromBFile = function() {
// body...
$http.get('b.json')
.success(function (data) {
var inputs=[];
$scope.formInputs = data.input;
angular.forEach($scope.formInputs, function (value, key) {
/* do something for all key: value pairs */
inputs.push({
"value": value.value,
"inputValues": value.inputValues,
"type": value.inputType.toLowerCase(),
"name": value.name,
"required": value.required
});
});
getFormfromData(inputs,'BID');
})
.error(function (err) {
alert(err);
});
There are good "librairies" to build forms from JSON. 有很好的“库”可以从JSON构建表单。 To name only 2 of them: 仅列出其中两个:
I will suggest you to instead use a library for that, coz why to reinvent the wheel when you already have readymade off shelf components.. 我建议你改为使用一个库,当你已经有现成的架子组件时,为什么要重新发明轮子呢?
Use Alpaca JS : http://www.alpacajs.org/ 使用羊驼JS: http : //www.alpacajs.org/
It allows you creating HTML form using simple JSON structures like this 它允许您使用这样的简单JSON结构创建HTML表单
$(function() {
$("#form1").alpaca({
"schema": {
"title": "User Feedback",
"description": "What do you think about Alpaca?",
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Name"
},
"ranking": {
"type": "string",
"title": "Ranking",
"enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']
}
}
}
});
});
And the output for this will be something like 而输出将是这样的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.