如何使用 ng-repeat 迭代相同的值并将其绑定到 ul答案

【问题标题】：How to use ng-repeat to iterate same values and bind it in ul如何使用 ng-repeat 迭代相同的值并将其绑定到 ul
【发布时间】：2016-07-30 13:41:41
【问题描述】：

从 Datatable 我得到下面的列表

$scope.Course = [
    { CourseHeading: 'Course1', subcourse: 'A' },
    { CourseHeading: 'Course1', subcourse: 'B' },
    { CourseHeading: 'Course2', subcourse: 'A' },
    { CourseHeading: 'Course2', subcourse: 'B' },
    { CourseHeading: 'Course3', subcourse: 'D' }]

我想要这样的结果 CourseHeading:Course1 subcourse:A, B CourseHeading:Course2 subcourse:A, B CourseHeading:Course3 subcourse:D 我如何使用ng-repeat？

【问题讨论】：

标签： angularjs angularjs-scope ng-repeat

【解决方案1】：

使用angular.filter模块，angular.filter

var app = angular.module('plunker', ['angular.filter']);

app.controller('MainCtrl', function($scope) {
$scope.Course = [
    { CourseHeading: 'Course1', subcourse: 'A' },
    { CourseHeading: 'Course1', subcourse: 'B' },
    { CourseHeading: 'Course2', subcourse: 'A' },
    { CourseHeading: 'Course2', subcourse: 'B' },
    { CourseHeading: 'Course3', subcourse: 'D' }]
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-app="plunker" ng-controller="MainCtrl">
    <ul ng-repeat="(key, value) in Course | groupBy: 'CourseHeading'">
        CourseHeading: {{ key }}
         
       <div style="margin-left:10px;">SubCourse: <span ng-repeat="subValue in value">{{subValue.subcourse}}{{($index < value.length - 1 ? ", " : "")}}</span></div>
      </ul>
  </body>

</html>

【讨论】：

要使用逗号而不是每个子课程在单独的行上输出，您可以将第二个 ng-repeat 更改为：<div style="margin-left:10px;">SubCourse: <span ng-repeat="subValue in value">{{subValue.subcourse}}{{($index < value.length - 1 ? ", " : "")}}</span></div>
httpget返回数据怎么办？ $scope.Course = 数据； Json.Stringify(data) 是[{ "CourseHeading": "Course1", "subcourse": "A" }, { "CourseHeading": "Course1", "subcourse": "B" }, { "CourseHeading": "Course2", "subcourse": "A" }, { "CourseHeading": "Course2", "subcourse": "B" }, { "CourseHeading": "Course3", "subcourse": "D" }]