Как использовать ng-repeat, чтобы повторить те же значения и связать их в ul

Question

Как использовать ng-repeat, чтобы повторить те же значения и связать их в ul

0

Из 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?

GirishBabuC 30 июль 2016, в 07:42

Источник

Теги:

angularjs

angularjs-scope

ng-repeat

1 ответ

Ещё вопросы

tom moc · Accepted Answer · 2016-07-30T03-37-00.000Z

Использовать модуль углового 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>

Чтобы выводить с запятыми вместо каждого подпроцесса на отдельной строке, вы можете изменить свой второй 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 = data; Json.Stringify (data) is [{ "CourseHeading": "Course1", "subcourse": "A" }, { "CourseHeading": "Course1", "subcourse": "B" }, { "CourseHeading": "Course2", "subcourse": "A" }, { "CourseHeading": "Course2", "subcourse": "B" }, { "CourseHeading": "Course3", "subcourse": "D" }]