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

Question

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

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

plunker

$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

有很好的“库”可以从JSON构建表单。 仅列出其中两个：

• http://formly-js.github.io/angular-formly/#!/
• https://github.com/json-schema-form/angular-schema-form

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']
        }
      }
    }
  });
});

而输出将是这样的