AngularJS：雙向數據綁定不能在嵌套的ng-repeat中工作

Question

我是AngularJS的新手。我使用嵌套ng-repeat生成多個表單。而表單數據是動態的json。所以問題是數據綁定爲TEXT,​​3210和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); 
     } 
    }; 
} 

謝謝

Answer 1

嘗試在您向鏈路功能刪除下面element.replaceWith。

element.replaceWith(element.children()); 

你並不需要調用replaceWith（）的指令，因爲指令已經包裹模板內容，這將被包含編譯一次。

這是可行的jsfiddle demo

Answer 2

你真的需要你自己的ng-If指令嗎？如果您使用內置的ng-if，您的示例工作正常。

請注意，無論哪種情況，您都需要在HTML中將其寫爲小寫字母ng-if。

更新： jsfiddle