javascript - 如何将 ng-repeat 与 ng-model 一起使用并获取 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不返回 ID。如果我使用$indexwithng-repeat那么我得到一个数组：

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

结构很好，但这不是我的服务ID。

服务

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

getQuestion() {
  return allQuestions;
},

控制器

$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"></textarea>
   </div>        
</form>

也许有比ng-repeat.

标签： javascriptangularjs

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>