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

感谢

Answer 1

尝试在指令链接函数中删除下面的element.replaceWith。

element.replaceWith(element.children());

您不需要在指令中调用replaceWith（），因为指令已经包装了模板内容，并且一旦编译就会被包含在内。

这是一个可行的jsfiddle demo

Answer 2

您真的需要自己的ng-If指令吗？如果您使用内置的ng-if，那么您的示例可以正常工作。

请注意，在任何一种情况下，您都需要在HTML中将其写为小写ng-if。

<强>更新： jsfiddle

AngularJS：双向数据绑定在嵌套的ng-repeat中不起作用

2 个答案: