AngularJS : 중첩 된 반복에서 양방향 데이터 바인딩이 작동하지 않습니다.

Question

저는 AngularJS을 처음 사용합니다. 여러 폼을 생성하려면 중첩 된 ng-repeat을 사용하고 있습니다. 그리고 폼 데이터는 동적 인 json입니다. 그래서 문제는 TEXT에 대한 데이터 바인딩, TEXTAREA 및 SELECT 입력이 작동하지 않습니다.

JSFiddle :http://jsfiddle.net/gTc5v/10/

HTML :

<div ng-controller="ctrl"> 
    <div ng-repeat="form in forms"> 
     <h2>{{form.name}}</h2> 

     <div ng-repeat="field in form.form_fields"> 

     <div ng-If="showElement(field,'RADIO')"> 
     <div> 
     <h3>{{field.caption}}</h3> 
     <span ng-repeat="option in field.optionValues"> 
     <input ng-model="field.answer" type="radio" value="{{option}}" >{{option}} 
      <br/></input> 
     </span> 
     </div> 
     </div> 

     <div ng-If="showElement(field,'TEXT')"> 
     <input ng-model="field.answer" type="text" placeholder="{{field.caption}}" /> 
     </div> 

     <div ng-If="showElement(field,'PARAGRAPH_TEXT')"> 
     <textarea ng-model="field.answer" placeholder="{{field.caption}}"></textarea> 
     </div> 

     <div ng-If="showElement(field,'LIST')"> 
     <div> 
     <h3>{{field.caption}}</h3> 
     <select ng-model="field.answer"> 
      <option ng-repeat="option in field.optionValues">{{option}}</option> 
     </select> 
     </div> 
     </div> 

     <div ng-If="showElement(field,'CHECKBOX')"> 
     <div> 
     <h3>{{field.caption}}</h3> 
     <span ng-repeat="option in field.optionValues"> 
      <input ng-checked="field.answers.indexOf(option) != -1" ng-click="toggleCheck(field.answers,option)" type="checkbox">{{option}} 
      <br/></input> 
     </span> 
     </div> 
     </div> 
    </div> 
    <br/> 
    <div ng-repeat="field in form.form_fields"> 
    {{field.caption}} : {{field.answer}}{{field.answers}} 
    </div> 
    <br/> 

</div> 

AangularJS :

angular.module('myApp', []).directive('ngIf', function() { 
    return { 
     link: function (scope, element, attrs) { 
     if (scope.$eval(attrs.ngIf)) { 
      // remove '<div ng-if...></div>' 
      element.replaceWith(element.children()); 
     } else { 
      element.replaceWith(' '); 
     } 
    } 
}; 
}); 

function ctrl($scope) { 

    $scope.fields = [{ 
     "caption": "Gender", 
     "questionType": "RADIO", 
     "optionValues": ["Male", "Female"], 
     "fieldPriority": "INCLUDE" 
    }, { 
     "caption": "City", 
     "questionType": "TEXT", 
     "optionValues": "", 
     "fieldPriority": "INCLUDE" 
    }, { 
     "caption": "Address", 
     "questionType": "PARAGRAPH_TEXT", 
     "optionValues": "", 
     "fieldPriority": "INCLUDE" 
    }, { 
     "caption": "Nationality", 
     "questionType": "LIST", 
     "optionValues": ["Indian", "American"], 
     "fieldPriority": "INCLUDE" 
    }, { 
     "caption": "Tea/Coffee", 
     "questionType": "CHECKBOX", 
     "optionValues": ["Tea", "Coffee"], 
     "fieldPriority": "INCLUDE" 
    }]; 

    angular.forEach($scope.fields, function(field) { 
     if(field.questionType == 'CHECKBOX'){ 
      field.answers = []; 
     } else{ 
      field.answer = ""; 
     } 
    }); 

    $scope.forms = [{"name":"Form 1","form_fields" : angular.copy($scope.fields)},{"name":"Form 2","form_fields" : angular.copy($scope.fields)}]; 

    $scope.showElement = function (field, type) { 
     return field.questionType == type; 
    }; 

    $scope.toggleCheck = function (answer, option) { 
     if (answer.indexOf(option) === -1) { 
      answer.push(option); 
     } else { 
      answer.splice(answer.indexOf(option), 1); 
     } 
    }; 
} 

,536,

감사합니다.

Answer 1

시도는 지시 링크 기능에서 아래 element.replaceWith를 제거합니다.

element.replaceWith(element.children()); 

당신은 지시어는 템플릿 내용을 포장하고 그것을 한 번 컴파일에 포함되기 때문에 지시에 replaceWith()를 호출 할 필요가 없습니다.

여기가 유용합니다. jsfiddle demo

Answer 2

ng-If 지시문이 정말로 필요합니까? 당신의 예제는 내장 된 ng-if을 사용하면 잘 동작합니다.

HTML의 경우 ng-if이라는 소문자로 작성해야합니다.

업데이트 : jsfiddle