javascript - 如何在angular js中重复一个数组

标签 javascript angularjs arrays

如何ng-repeat Angular 数组,我想在我的 View 中循环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>

我哪里做错了?

最佳答案

你不需要在 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>

关于javascript - 如何在angular js中重复一个数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45004975/

相关文章:

angularjs - 使用ngDialog确认模态

jQuery/Ajax : How to loop through array as part of Ajax success function

javascript - 纯函数的参数数量不受支持

javascript - Google map 地点 javascript 文本搜索 : can't get radius to work

javascript - 获取图片的 alt 以显示

javascript - 修改正则表达式,以便仅捕获 [a-zA-Z]

angularjs - 如果输入获得焦点,则使 ng-show 触发

ios - 在 Swift 中链接选择器

c - 在 C 中用数组绘制轨迹图

javascript - 从javascript或jquery中的另一个页面重定向时如何自动单击按钮?