Javascript 如何使用angular从json生成视图（表单）？

我正在尝试从json生成视图。当我有对象数组时，我能够生成视图并验证该视图。 如果我有这个对象数组，在这种情况下我可以查看， 止回阀

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

• “displayName”：显示标签的名称，该名称来自输入文本的名称 场
• inputValues：表示填充的tmput类型。如果是数字，则 用户只填写号码，文本，然后用户只填写号码，然后发送电子邮件 用户填写电子邮件，如果它切换，那么它是下拉给定的 选择权
• “必填”字段是否为必填字段

---

假设您的

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

级别，然后构建

输入

数组：

$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的日期标注为公开日期

您可以对该Json进行更改吗？或者是你无法控制的东西？不，我不想更改json。我们可以使用这些插件吗。@Fedaykin json是修复的。使用该json，我需要创建自己的json对象，然后用于使viewplunker无法工作。请检查。链接未打开。谢谢寻找相同的答案。很好的答案。我需要问2个问题，我们如何才能让drop淹没在其中“addFullDataInReport”我们有选项“true”和“False”的拖放“第二个问题？进一步使用此插件很好我需要验证我的表单。我有大约40个json文件，所以我需要创建40个表单，这样我可以使用您的解决方案或此插件进行验证。请检查此插件。我使用了此插件，但它不会显示..嗯，不确定验证。我在github项目中看不到它。很遗憾，我没有更多的时间来研究这个问题，对不起。在我的示例中，可以使用javascript创建方法。但我不确定，对不起。

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