如何使用angular从json生成视图（窗体）？

一尘不染

如何使用angular从json生成视图（窗体）？

angularjs

我正在尝试从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的类型。如果是数字，则用户仅填充数字，文本，然后，用户仅填充数字，电子邮件，然后用户填充电子邮件，如果切换则通过给定选项下拉。
“必填”字段是否为必填项？

阅读 201

2020-07-04

共1个答案

一尘不染

假设您JSON来自配置文件或服务，则可以从获取JSONas作为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})
});

请注意，您可能应该在此处进行一些错误检查-就本示例而言，我不使用任何错误检查。
这是演示此代码的工作plnkr。

我还没有全部工作-您必须构造选择或单选按钮输入，但是我认为您应该可以从这里开始使用它。

编辑我没有将plnkr公开

2020-07-04