当前位置: 代码迷 >> JavaScript >> AngularJS ng-repeat问题和具有匹配答案对象的init输入
  详细解决方案

AngularJS ng-repeat问题和具有匹配答案对象的init输入

热度:130   发布时间:2023-06-05 16:02:57.0

我正在使用ng-repeat来重复由ajax响应提供的问题,并且我需要每个问题输入的ng-model指向单独的答案数组。

问题数组如下所示

bookingQuestions: [
    0: {
        label: 'Any allergies?',
        type: 'text',
        id: 1234
    },
    1: {
        label: 'Names of attendees',
        type: 'text',
        id: 1235
    }
]

我通过遍历所有问题并将id和一个空的answerValue属性推入我的空bookingAnswers数组中来创建答案数组。 答案数组如下所示:

bookingAnswers: [
    0: {
        id: 1234,
        answerValue: ''
    },
    1: {
        id: 1235,
        answerValue: ''
    }
]

在标记中,我试图通过获取正确的答案对象以匹配相应的问题来初始化answerObj

<div class="question" ng-repeat="question in bookingQuestions">
    <label class="question-label" for="{{question.id}}">{{question.label}}
    </label>
    <input type="text" name="{{question.id}}" ng-model="answerObj"
           ng-init="answerObj = getAnswerObj(question)">
</div>

JS函数:

$scope.getAnswerObj = function(question) {
    angular.forEach(bookingAnswers, function(answer) {
        if(question.id === answer.id) {
            return answer.answerValue;
        }
    });
}

即使JS函数成功返回了正确的对象属性,也不会更新ng-model以使用它。 我该如何工作?

您将所有输入的ng模型绑定到某个answerObj这意味着它们都指向同一变量。 使用$index可以访问当前迭代的索引。 因此,您可以执行以下操作:

<input type=“text“ name="{{question.id}}"
       ng-model="bookingAnswers[$index].answerValue"> </div>
<div class="question" ng-repeat="question in bookingQuestions">
    <label class="question-label" for="{{question.id}}">{{question.label}}
    </label>
    ?<?i?n?p?u?t? ?t?y?p?e?=?"?t?e?x?t?"? ?n?a?m?e?=?"?{?{?q?u?e?s?t?i?o?n?.?i?d?}?}?"? ?n?g?-?m?o?d?e?l?=?"?a?n?s?w?e?r?O?b?j?"?
    <input type="text" name="{{question.id}}" ng-model="answerObj.answerValue"
           ng-init="answerObj = getAnswerObj(question)" />
</div>
$scope.getAnswerObj = function(question) {
    angular.forEach(bookingAnswers, function(answer) {
        if(question.id === answer.id) {
            ?r?e?t?u?r?n? ?a?n?s?w?e?r?.?a?n?s?w?e?r?V?a?l?u?e?;?
            return answer;
        }
    });
}
  相关解决方案