AngularJS ng-repeat вопросы и вводные данные с соответствующим объектом ответа

Question

Я использую ng-repeat для повторения вопросов, предоставленных в ответе ajax, и мне нужна ng-модель каждого входного вопроса, чтобы указать на отдельный массив ответов.

Массив вопросов выглядит следующим образом

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

Я создаю массив ответов, просматривая все вопросы и помещая идентификатор и пустое свойство 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-модель не обновляется для его использования.Как мне заставить это работать?

Answer 1

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

Answer 2

Вы связываете ng-модель всех ваших входных данных с некоторыми answerObj, означающими, что все они указывают на одну и ту же переменную.Используя $index, вы можете получить доступ к индексу текущей итерации.Таким образом, вы можете сделать что-то вроде этого:

<input type=“text“ name="{{question.id}}"
       ng-model="bookingAnswers[$index].answerValue"> </div>