如何使用ng-repeat迭代相同的值并将其绑定在ul中

时间:2016-07-30 04:55:17

标签: angularjs angularjs-scope ng-repeat

从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

1 个答案:

答案 0 :(得分:3)

使用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>
&#13;
&#13;
&#13;