Как использовать ng-repeat с ng-моделью и получить ID

Question

У меня есть форма с ng-model="award.myProperty". Есть некоторые входы и texareas. В моем сервисе у меня есть массив для textareas:

 allQuestions = [
    id: 'XXX', question: 'some text',
    id: 'YYY', question: 'some text', 
    id: 'ZZZ', question: 'some text',
 ];

Моя цель - получить данные из текстовых областей в такой структуре

questions: [{
   'XXX': 'data from textarea1',
   'YYY': 'data from texarea2',
   'ZZZ': 'data from textarea3',
}];

Я пытался использовать ng-repeat с ng-model, но ng-model не возвращает идентификаторы. Если я использую $index с ng-repeat, тогда я получаю массив:

[{ 0: 'data from textarea1',
   1: 'data from textarea2',
   2: 'data from textarea3',}]

Структура хорошая, но это не мой идентификатор из сервиса.

СЕРВИС

const allQuestions = [
   { id: 'XXX', question: 'question1' },
   { id: 'YYY', question: 'question2' },
   { id: 'ZZZ', question: 'question3' },
];

getQuestion() {
  return allQuestions;
},

CONTROLLER

$scope.allQuestions = awards_service.getQuestion();
$scope.award = {
    description: '',
    questions: [],
};

VIEW

<form name="awardForm">
    <input ng-model="award.description"></input>
    <div ng-repeat="question in allQuestions">
        <textarea ng-model="award.questions"></textarea>
   </div>        
</form>

Может быть, есть лучшее решение, чем ng-repeat.

Answer 1

В вашем контроллере измените $scopre.award.questions на:

$scope.allQuestions = awards_service.getQuestion();
$scope.award = {
    description: '',
    questions: [{}]
};

Затем в представлении:

<form name="awardForm">
    <input ng-model="award.description"></input>
    <div ng-repeat="question in allQuestions">
        <textarea ng-model="award.questions[0][question.id]"></textarea>
   </div>        
</form>

Демо:

angular.module("myApp", [])
.controller('myCtrl', ['awards_service', '$scope', function(awards_service, $scope) {
  $scope.allQuestions = awards_service.getQuestion();
  $scope.award = {
      description: '',
      questions: [{}],
  };
  
  $scope.submit = function() {
    console.log($scope.award);
    // submit your form then reset the award object
    // ...
    $scope.award = {
        description: '',
        questions: [{}],
    };
  }
}])
.factory('awards_service', function() {
  const allQuestions = [
     { id: 'XXX', question: 'question1' },
     { id: 'YYY', question: 'question2' },
     { id: 'ZZZ', question: 'question3' },
  ];

  return {
    getQuestion() {
      return allQuestions;
    }
  }

});

.as-console-wrapper { height: 70px !important; overflow: auto; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
 <div ng-controller="myCtrl">
   <form name="awardForm" ng-submit="submit()">
    <label>Description</label><br>
    <input ng-model="award.description"></input><br>
    <label>Questions</label><br>
    <div ng-repeat="question in allQuestions">
        <textarea ng-model="award.questions[0][question.id]" placeholder="Enter a question"> </textarea>
   </div>
   <input type="submit" value="submit" />
  </form>
 </div>

</div>