동적 인 HTML 템플리트를 가진 AngularJS 재귀 적 지시문 (현상금)

나는 여기서 정말로 어려운 작업을한다. 프로젝트의 Restful Web Service에 다른 HTTP 메소드를 보내고 JSON으로 응답을 수신 할 수있는 AngularJS 웹 앱에서 작업하고 있습니다. 이것은 기본적는 다음과 같습니다동적 인 HTML 템플리트를 가진 AngularJS 재귀 적 지시문 (현상금)

enter image description here

당신은이 응용 프로그램에서 일부 REST resource을 만들 수 있습니다. exam을 예로 들어 보겠습니다. 시험을 작성하려면 사용 가능한 자원 목록에서 자원을 선택하십시오. 이 함수는 localhost:8080/STEP/api/explain/resorceName에게 요청을 보내고이 리소스에 대한 설명을 가져옵니다. 설명은 다음과 같다 :

http://jsonblob.com/534fc022e4b0bb44248d6460

를 응답 수신 후 - I는 입력 필드처럼 다음과 제작을 시작 (-이 자원 필드 오브젝트의 배열, enumValues-allFields 자원의 필드에 대한 ENUM 값 경우 부동산 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이 아닌 모든 자원의 필드에 대해 위에서 설명한 것처럼 maner에서 필드를 생성 할 수있는 재귀 적 지시문을 작성해야합니다. 모든 필드를 얻으려면 localhost : 8080/STEP/api/explain/restResourceName에 요청을 보내고 위에 나온 것과 비슷한 JSON 응답을 얻은 다음 모델에 값을 입력하기위한 HTML 요소를 작성하는 데 사용합니다.

각도 재귀 지시문을 사용하여이를 달성하는 방법을 아는 사람이 있습니까? 모든 유용한 대답은 높이 평가되고 평가됩니다. 정답은 +50을 얻게 될 것입니다. 그렇지 않으면 나는 2 일 동안 이걸로 정말로 붙어 있기 때문에 현상금을 시작할 것입니다.

추가 정보가 필요하면 알려주세요.

감사합니다.

출처

2014-04-17 amenoire

어쩌면이 체크 아웃 : http://stackoverflow.com/questions/19125551/angularjs-understanding-a-recursive -directive –

나는 당신이 올바른 길에 있다고 생각합니다. js 개체의 설명을 기반으로 양식을 생성하는 a small plunkr을 만들었습니다.

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", 
    }; 
});

정확히 당신이 붙어 무엇입니까?

출처

2014-04-17 13:19:38

plunkr에서했던 일을 할 수있는 지시어를 만들 수 없습니다 + 필드에 restResourceName이 있습니다 - 각 필드에 대해 재귀 적으로 호출되어야합니다. – amenoire

필드가있는 필드가 있음을 의미합니까? –

예. 필드 등을 포함 할 수 있습니다. – amenoire

당신이 이것을 이미 보았는지 확실하지 않지만, 당신이 말하는 것과 비슷합니다. http://jsbin.com/acibiv/3/edit

을 쓴이 조금 여기에 설명 남자 :

이

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

출처

2014-06-11 09:21:46

동적 인 HTML 템플리트를 가진 AngularJS 재귀 적 지시문 (현상금)

답변

관련 문제