如何从使用角度JSON视图（表）？ [英] how to make view (form)from json using angular?

问题描述

我试图让从JSON视图。当我有。我是能够使查看和验证这一观点的对象数组。
如果我有这个数组对象，在这种情况下，我做能够查看，
检查plunker
http://plnkr.co/edit/eD4OZ8nqETBACpSMQ7Tm?p=$p$pview

I am trying to make view from json .When I have array of objects .I am able to make view and validate that view . If I have this array of object ,in that case I make able to view , check 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

Now the problem occurred when i have json object .I need to show view from json object .I don't know from where I will start work I have this json

• 显示名：显示标签的名称是从输入文本
  域。


• inputValues​​：重present充满。如果它tmput的类型是号码，然后
  用户填写只有数字，文本，然后用户只填写号码，电子邮件则
  用户填写的电子邮件，如果切换那么它是下拉给定
  选项​​。


• 必需的，如果需要的字段或放弃不？

推荐答案

假设你的 JSON 从配置文件或服务来了，你可以通过获取启动 JSON 为 JSON 对象：

Assuming your JSON is coming from a configuration file or a service, you can start by obtaining the JSON as a JSON object:

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",\

（我不得不逃跑的回报，让pretty印刷 JSON 来解析字符串）

一旦你的，你几乎没有。现在，你可以去 JSON 您需要和建设水平的输入数组：

Once you have that, you are nearly there. Now you can just go the level of JSON that you require and construct your inputs array:

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

请注意你或许应该做一些错误检查在这里 - 在这个例子而言，我不使用任何。 这里演示了这个code工作plnkr。

Note you should probably do some error checking here - for the purposes of this example, I don't use any. Here is a working plnkr that demonstrates this code.

我还没有得到这一切的工作 - 你必须构建你选择或单选按钮输入，但我认为你应该能够把它从这里

I haven't got it all to work - you'll have to construct your select or radio button inputs, but I think you should be able to take it from here.

修改我有没有注明日期的plnkr把它公开

EDIT I have undated the plnkr to make it public

这篇关于如何从使用角度JSON视图（表）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！