Question

我有一个问题是使用angular将新对象添加到数组。此示例仅从较大的数组中提取，但架构是相同的。请添加Add new input并添加索引ng-model的新输入。如果您填写输入并单击add to array，则此对象应添加到ng-model="quiz"，然后如果我更改输入中的文本并再次添加新数组，我应将下一个对象添加到quiz等。我认为最大的问题是，如果我将3个对象作为quiz数组，那么如果我更改输入，则所有添加的对象都会发生变化。我必须使用track by $index

angular.module('myApp', [])
.controller('myController', function($scope){
      $scope.questionQuiz = [];
      $scope.product = {
        quiz : []
       }
      $scope.addQuizQuestion = function(){
        $scope.questionQuiz.push({})
      }
      $scope.addToMultipleQuiz = function(){
        $scope.product.quiz.push({
            question: $scope.questionContent,
            feedback: $scope.feedback
        })
      }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp" ng-controller="myController">
    <a ng-click="addQuizQuestion()">
      <i class="fa fa-plus"></i>&nbsp;Add new input
   </a> 
   <div ng-repeat="question in questionQuiz track by $index">
    <label><h3>Input {{$index +1}}</h3></label>                      
    <input type="text" ng-model="questionContent[$index]" placeholder="Question...">
    <input type="text" ng-model="feedback[$index]" placeholder="Feedback..."> 
   </div>
   <button ng-click="addToMultipleQuiz()" type="button"><i class="fa fa-check-square-o"></i> Add to array</button>
   <input type="text" ng-model="product.quiz">
   {{product.quiz}}
  </body>
</html>

Answer 1

你有点难以做到这一点。您假设questionContent和feedback是数组（即使您从未声明过它们），然后您将它们编入索引。

如果你强迫它可以修复，但有意义的是将它们放在question内，因为你在问题上循环。因此，您可以question.content和question.feedback。

另一方面，所有question的数据都已存储在$scope.questionQuiz中（因为您正在循环播放）。即使屏幕上有多个question，也是如此，这样concat就可以轻松$scope.product.quiz。

最后一件事是你最后有的输入字段ng-model="product.quiz"，一旦你做了上面的事情就正确地链接了，但它会显示＆＃34; [object Object ]＆＃34;因为它是一个对象。

在应用我上面描述的内容之后的代码。

＆＃13;

angular.module('myApp', []).controller('myController', function($scope) {
  $scope.questionQuiz = [];
  $scope.product = {
    quiz : []
  };
  $scope.addQuizQuestion = function() {
    $scope.questionQuiz.push({});
  };
  $scope.addToMultipleQuiz = function() {
    $scope.product.quiz = $scope.product.quiz.concat($scope.questionQuiz);
  };
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp" ng-controller="myController">
    <a ng-click="addQuizQuestion()">
      <i class="fa fa-plus"></i>&nbsp;Add new input
    </a> 
    <div ng-repeat="question in questionQuiz">
      <label><h3>Input {{$index +1}}</h3></label>                      
      <input type="text" ng-model="question.content" placeholder="Question...">
      <input type="text" ng-model="question.feedback" placeholder="Feedback..."> 
    </div>
    <button ng-click="addToMultipleQuiz()" type="button"><i class="fa fa-check-square-o"></i> Add to array</button>
    {{product.quiz}}
  </body>
</html>

＆＃13;

使用Angular和$ index将对象添加到数组

1 个答案: