Question

我这里有一项非常艰巨的任务。我正在开发一个AngularJS网络应用程序，它能够向我们项目的Restful Web Service发送不同的HTTP方法，并以JSON格式接收响应。基本上它看起来像这样：

enter image description here

您可以从此应用程序创建一些REST resource。我们来说exam。要创建考试 - 您可以从可用资源列表中选择资源。这会触发一个函数，该函数向localhost:8080/STEP/api/explain/resorceName发送请求并获取此资源的描述。描述如下：

http://jsonblob.com/534fc022e4b0bb44248d6460

收到回复后 - 我开始构建输入字段，如下所示（allFields - 此资源的字段对象数组enumValues - 如果属性为isEnum = true，则为资源字段的枚举值：

<div ng-repeat="field in allFields">
    <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()"
            class="form-control" placeholder="{{parseClassName(field.type)}}">
    </div>
    <div ng-show={{field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <select ng-model="updateEntityResource[field.name]" ng-change="getUpdateEntityAsText()" class="form-control">
            <option></option>
            <option ng-repeat="enumValue in field.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>
        </select>
    </div>
</div>

现在，问题。我需要创建一个递归指令，它能够为上面描述的每个资源的字段生成字段，其中“restResourceName”不是null。要获取所有字段，您只需向localhost发送请求：8080 / STEP / api / explain / restResourceName并获取类似的JSON响应，如上所示，然后用于构建HTML元素以将值输入到模型中。

如何使用角度递归指令实现这一目标？

Answer 1

我认为你走在正确的轨道上。我创建了a small plunkr，它根据js对象中的描述生成表单。

的index.html：

<body ng-controller="MainCtrl">

  <div my-form form-config="allFields" model="model1"></div>
  <div my-form form-config="allFields" model="model2"></div>

  Model 1: {{model1|json}}<br>
  Model 2: {{model2|json}}<br>

</body>

myForm.html（模板）：

<div ng-repeat="field in formConfig">
      <div ng-show={{!field.isEnum}}>
        <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
        <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
        <input type="text" ng-model="model[field.name]">
      </div>
</div>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.allFields = [
    {
      "isEnum": false,
      "isRequired": true,
      "name": "First name"
    },
    {
      "isEnum": false,
      "isRequired": false,
      "name": "Last name"
    }
    ];

  $scope.model1 = {};
  $scope.model2 = {"First name":"John","Last name":"Doe"};
});

app.directive('myForm', function() {
  return {
    scope: {
      formConfig:"=",
      model:"="
    },
    templateUrl:"myForm.html",
  };
});

你究竟被困在了什么地方？

Answer 2

我不确定你是否已经看过这个，但这听起来很像你在说什么。 http://jsbin.com/acibiv/3/edit

写这篇文章的人在这里解释了一下：

http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

具有动态HTML模板的AngularJS递归指令

2 个答案: