Question

我正在尝试使用json以角度制作表单。当我拿一个json文件时很简单，因为我编写了我的html并使用迭代我显示了表单字段。现在如果我有3个或4个json文件，我需要使用不同的id生成不同的表单并显示它。我可以生成动态表单吗？

我拿两个按钮从文件“A”和“B”获取json数据。我需要在点击时显示不同的表单。

$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);
  });

Answer 1

有好的＆＃34;图书馆＆＃34;从JSON构建表单。仅列举其中两个：

Answer 2

我建议你改为使用一个库，因为当你已经有现成的架子组件时，为什么重新发明轮子呢。

使用羊驼JS：http://www.alpacajs.org/

它允许您使用像这样的简单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']
        }
      }
    }
  });
});

此输出将类似于

The output will look something like this

如何从JSON角度制作动态表单？

2 个答案: