如何在角度js中重复一个数组答案

【问题标题】：How to repeat an array in angular js如何在角度js中重复一个数组
【发布时间】：2017-07-10 06:20:40
【问题描述】：

如何ng-repeat 角度数组，我想在我的视图中循环gpa。

   [
  {
    "id": 1,
    "name": "Pre-Algebra",
    "selected": true,
    "gpa": [
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      },
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      }
    ]
  },
  {
    "id": 2,
    "name": "Pre-Calculus",
    "selected": true
  }
]

查看代码：

 <div ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected  : true} track by $index">
 <table class="academy-table gpa-table" ng-class="!ctrl.editAcademyToggle?'data-view':''">
        <tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
            <td>
                <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
            </td>
        </tr>
</table>
    </div>

我哪里做错了？

【问题讨论】：

标签： javascript angularjs arrays

【解决方案1】：

你不需要在 ngRepeat 表达式中使用$index

使用

<tr ng-repeat="gpa in course.gpa"

而不是

<tr ng-repeat="gpa in course.gpa[$index]"

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  this.subjectCourseGrades = [{
    "id": 1,
    "name": "Pre-Algebra",
    "selected": true,
    "gpa": [{
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      },
      {
        "grade_date": null,
        "grade_type": null,
        "grade_percent": null,
        "letter_grade": null
      }
    ]
  }];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl as ctrl">
    <div ng-repeat="course in ctrl.subjectCourseGrades | filter: {selected  : true} track by $index">
      <table class="academy-table gpa-table">
        <tr ng-repeat="gpa in course.gpa" class="ots-data">
          <td>
            <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

【讨论】：

它是一个数组，我一开始就尝试了你的代码，它没有在循环中显示记录。
@Developer，根据更新的代码ng-repeat="gpa in course.gpa" 应该可以工作，测试一次并删除 ng-if="!ctrl.editAcademyToggle"
是的，我试过了，当我检查 {{course.gpa | json}} 它的到来时，当我尝试 {{gpa | json}} 内部循环时它没有显示任何内容
可以用我的 json 对象更新你的代码片段。
@Developer，当然；你能分享 subjectCourseGrades 数据结构吗？查看更新的 sn-p

【解决方案2】：

从 ng-repeat 中删除 $index

<tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
            <td>
                <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
            </td>
        </tr>

Edit1 ：查看您的问题后，您似乎正在使用控制器作为 $scope.你需要这个：

<tr ng-repeat="gpa in ctrl.course.gpa"></tr>

编辑 2：div 不是有效的表格元素。这可能是不工作的原因。使用 tbody 。

<tbody ng-repeat="course in ctrl.subjectCourseGrades| filter: {selected  : true} track by $index">
    <tr ng-repeat="gpa in course.gpa" ng-if="!ctrl.editAcademyToggle" class="ots-data">
        <td>
            <b>Id is  : {{$index}}<span ng-bind="gpa.grade_date"></span></b>
        </td>
    </tr>

【讨论】：

为什么在表格中使用 div。 Div 不是有效的表格元素。这可能是不工作的原因