javascript - AngularJS:两种方式的数据绑定(bind)在嵌套的 ng-repeat 中不起作用

Question

我是 AngularJS 的新手。我正在使用嵌套的 ng-repeat 生成多个表单。表单数据是动态的 json。所以问题是 TEXT、TEXTAREA 和 SELECT 输入的数据绑定(bind)不起作用。

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