Как разбить список массивов в ng-repeat

Я новичок в Angular и имею проблему с разделом в данный момент.Как разбить список массивов в ng-repeat

Я хочу разделить объекты класса на два столбца, называемых subject ID, и Name с помощью split ("-" и ";"). Однако я не знаю, как это сделать в таблице ng-repeat.

Это то, что таблица выглядит сейчас:

То, что я хочу, это 3 столбец таблицы больше, как это:

username subject ID Subject Name

HTML код

<table class="table table-hover"> 
<thead> 
    <tr> 
     <th>#</th> 
     <th>Username</th> 
     <th>Class Subjects</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="studentsMember in currentPageElements"> 
     <td>{{$index + 1}}</td> 
     <td>{{studentsMember.username}}</td> 
     <td>{{studentsMember.class_subject}}</td> 
    </tr> 
</tbody>

Контроллер

function listStudentClassCtrl($scope,UserManager,SchoolService,SingleRequestHandler,TableService) { 
    $scope.items = {}; 

    var listStudentClassDefer; 
    if(angular.isUndefined(listStudentClassDefer)) 
    { 
     $scope.loading = true; 
     listStudentClassDefer = SingleRequestHandler.promiseRequest('ListClassesBySchoolId', {inst_id: SchoolService.getCurrentSchool().institution_id, user_type: 10}); 
     listStudentClassDefer.promise.then(
     function(data){ 
      console.info("ListUsers - data ",data); 
      $scope.staff = data.response; 
      TableService.elements = $scope.staff; 
     }, 
     function(httpError){ 
      console.log(httpError); 
      $scope.alert.stat = true; 
     }) 
     .finally(function(){ 
      $scope.loading = false; 
     }); 
    } 
}

формат ответа данных

"response":[ 
    { 

     "username":"bingowere ", 
     "class_subject":"8GEO 3 -- SocialSciences; 8SCI 3 -- Unknown; 8JAP 1 -- Unknown; 8PDH 4 -- Unknown" 
    }, 
    { 
     "username":"letbingo ", 
     "class_subject":"8GEO 2 -- SocialSciences; 8RC 6 -- SocialSciences; 8PDH 1 -- Unknown" 
    }]

источник

2017-02-23 Qing Xu

Не делайте этого в шаблоне , Сделайте это в своем контроллере или в сервисном коде JavaScript. Или лучше, исправьте бэкэнд, чтобы вернуть его структурированные данные JSON, а не строку для разделения. –

Thys для вашего предложения, но как это сделать с контроллером? –

@QingXu Не нужно делать это в контроллере (это слишком простое изменение), просто настройте свой HTML ... (см. Мой ответ ниже). –

Я считаю, что это может быть ближе к тому, что после Цин Сюй.

HTML:

<body ng-controller="listStudentClassCtrl"> 
    <table class="table table-hover"> 
    <thead> 
     <tr> 
     <th>#</th> 
     <th>Username</th> 
     <th>Subject ID</th> 
     <th>Subject Name</th> 
     </tr> 
    </thead> 
    <tbody ng-repeat="studentsMember in currentPageElements"> 
     <tr ng-repeat="classSubject in studentsMember.class_subject.split(';')"> 
     <td>{{$index + 1}}</td> 
     <td>{{studentsMember.username}}</td> 
     <td ng-repeat="SubjectIDName in classSubject.split('--')">{{SubjectIDName}}</td> 
     </tr> 
    </tbody> 
    </table> 
</body>

JavaScript/AngularJS Контроллер:

app.controller('listStudentClassCtrl', function($scope) { 
    $scope.currentPageElements = [{ 
    "username": "bingowere ", 
    "class_subject": "8GEO 3 -- SocialSciences; 8SCI 3 -- Unknown; 8JAP 1 -- Unknown; 8PDH 4 -- Unknown" 
    }, { 
    "username": "letbingo ", 
    "class_subject": "8GEO 2 -- SocialSciences; 8RC 6 -- SocialSciences; 8PDH 1 -- Unknown" 
    }]; 
});

Вот ссылка на рабочий Plunker, http://plnkr.co/edit/zcDHa6W8hRUKNMOgKnYZ?p=preview

источник

2017-02-23 03:07:50

Отлично! Спасибо! Это именно то, что я хочу! –

Отлично. Позвольте мне знать, если вам нужно что-нибудь еще. –

NB: Этот ответ подразумевает, что вы не можете обновить ответ сервера предварительно обработать этот ответ для вас в удобном формате

Лучше всего это сделать, обработав данные до (или сразу после), вы вызываете $scope.staff = data.response; Вы можете сделать это что-то вроде следующего кода:

var splitClassSubjectIntoIdAndName(response){ 
    var processedResponse = []; 
    for(var x = 0, len = response.length; x < len; x++){ 
     var responseItem = response[x]; // pass it all existing data 
     responseItem.subjects = []; 
     var idAndName = response[x].class_subject.split('; '); 
     for(var y = 0, lenY = idAndName.lenght; y < lenY; y++){ 
      var splitIdAndName = idAndName[y].split(' -- '); 
      responseItem.subjects.push({ 
       subject_id: splitIdAndName[0], 
       subject_name: splitIdAndName[1] 
      }); 
     } 
    } 
    return processedResponse; 
} 
$scope.staff = splitClassSubjectIntoIdAndName(data.response);

Тогда позже в вашем представлении кода, вы бы ng-repeat="staffMember in staff" и в этом ng-repeat="subject in staffMember.subjects".

В конце концов, лучший вариант был бы иметь данные сойдите с вашего сервера в удобном формате, таким образом, каждый клиент оленьей кожи должно обработать ответ, и вы можете использовать кэширование для ускорения ваших звонков :)

источник

2017-02-23 01:25:08 haxxxton

Как разбить список массивов в ng-repeat

ответ

Смежные вопросы