如何使用角度从json制作视图（表单）？

Question

我正在尝试从 json 中创建视图。当我有对象数组时。我能够创建视图并验证该视图。 如果我有这个对象数组，在这种情况下，我可以查看， 检查plunker http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=preview

[{
            type: "email",
            name: "email",
            required:true
        }, {
            type: "text",
            name: "name",
            required:true
        }, {
            type: "number",
            name: "phonenumber",
            required:true
        }, {
            type: "checkbox",
            name: "whant to check"
        },
            {
                type: "url",
                name: "server Url"
            }];

现在问题发生在我有 json 对象时。我需要从 json 对象显示视图。我不知道从哪里开始工作 我有这个json

• "displayName"：显示来自输入文本的标签名称 字段。
• inputValues :表示tmput填充的类型。如果是数字则 用户只填写数字，文本然后用户只填写数字，然后发送电子邮件 用户填写电子邮件，如果它切换然后它是下拉给定的 选项。
• "required" 给出字段是否为必填项？

Answer 1

假设您的JSON 来自配置文件或服务，您可以从获取JSON 作为JSON 对象开始：

angular.module('myapp', [])
  .controller('MyController', ['$scope', function($scope) {

    $scope.outputs = {};
    $scope.rawInput = JSON.parse( '{"studentName": "abc", \
        "input": {\
            "loginUser": {\
                "displayDetail": "UserId for login.",\
                "displayName": "Login User Id*",\
                "inputType": "TEXT",\

（我不得不转义返回以允许解析漂亮打印的 JSON 字符串）

一旦你有了它，你就快到了。现在您可以达到您需要的JSON 级别并构建您的inputs 数组：

$scope.formInputs = $scope.rawInput['input'];
$scope.inputs = [];

angular.forEach($scope.formInputs, function(value, key) {
/* do something for all key: value pairs */
  $scope.inputs.push({"type":value.inputType.toLowerCase(),"name":value.name,"required": value.required})
});

请注意，您可能应该在此处进行一些错误检查 - 出于本示例的目的，我没有使用任何错误检查。 Here 是一个演示此代码的工作 plnkr。

我还没有完成所有工作 - 您必须构建您的选择或单选按钮输入，但我认为您应该能够从这里获取它。

编辑我已经取消了 plnkr 的日期以将其公开