Wie ng-repeat verwenden dieselben Werte zu durchlaufen und binden es in ul

Von Datatable i Liste bin immer unterWie ng-repeat verwenden dieselben Werte zu durchlaufen und binden es in ul

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

i führen wollen wie diese CourseHeading:Course1 subcourse:A, B CourseHeading:Course2 subcourse:A, B CourseHeading:Course3 subcourse:D wie kann ich ng-repeat verwenden?

Quelle

2016-07-30 GirishBabuC

Verwendung angular.filter Modul, 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="[email protected]"></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>

Quelle

2016-07-30 05:34:26

Zur Ausgabe mit Komma anstelle jedes subcourse auf einer separaten Zeile Sie Ihre zweite 'ng-repeat' zu so etwas wie ändern können:' '

SubCourse: {{subValue.subcourse}}{{($index < value.length - 1 ? ", " : "")}}

– Lex

Dank @Lex, ich aktualisierte mit Ihrem Code –

@tommoc Vielen Dank – GirishBabuC

Wie ng-repeat verwenden dieselben Werte zu durchlaufen und binden es in ul

Antwort

Verwandte Themen