angularJS loop into ng-repeat

Question

Here's the situation : I'm actually working on a project in my school, this summer there will be a sport day organized by some profs. I am actually making a site with angularJS.

My problem is that I want to place the teams in every cell and if there are not any match I want to put a "-". For example if at 09:00 there isn't a football match I put a "-" in the cell and I show the teams in the other cells. I tried doing it with a if test directly in the expressions testing if the sport was equal to the sport in the header but when there are less than 6 match, the teams are not put in the right cell.

I thought of a solution and I found one, using the loop for since I know there are a maximum of 6 match but I don't know how to put a loop for in the expressions. If you have a better solution I will be happy to try it, if I didn't explain my problem properly I will try to do it in a better way.

Here is my code :

<table class="striped highlight">
    <thead class="light-blue darken-4">
    <tr>
        <th></th>
        <th>Ultimate</th>
        <th>Tchoukball</th>
        <th>Football</th>
        <th>Volleyball</th>
        <th>Handball</th>
        <th>Basketball</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="schedule in schedules track by $index">
        <td>{{schedule[0].HEURE_DEBUT_MAT}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
        <td>{{schedule[$index].NOM_EQU1 == null ? "-" : schedule[$index].NOM_EQU1 + " vs " + schedule[$index].NOM_EQU2}}</td>
    </tr>
    </tbody>
</table>

And for my script :

// Contrôleur pour la page du planning
scheduleApp.controller('scheduleController', function($scope, $http){

    // Déclaration des variables
    var adress = "/api/";
    $scope.schedules = [{}];

    /**
     * Requête qui récupère le planning depuis la BD
     * pour remplir la table
     */
    $scope.getSchedules = function(){
        $http({method: 'GET', url: adress + 'planning/export/period'})
            .success(function(dataSchedules){
                // Stock les informations récupérées dans une array
                $scope.schedules = dataSchedules;
                console.log(dataSchedules);
            })
            .error(function(response){
                console.log("Erreur ", response);
                Materialize.toast("Erreur dans le chargement du classement du planning ! Erreur : " + response , 10000);
            });
    };
});

The comments are in french, what I do is taking data from an API and putting those data in an array of objects. The data are formatted like this : {

"0": [
    {
        "NOM_EQU1": "Les Schnitzels",
        "NOM_EQU2": "Les Patrons",
        "NOM_SPO": "Ultimate",
        "HEURE_DEBUT_MAT": "09:00"
    },
    {
        "NOM_EQU1": "La Confrérie",
        "NOM_EQU2": "Koh Lanta",
        "NOM_SPO": "Tchoukball",
        "HEURE_DEBUT_MAT": "09:00"
    },
    {
        "NOM_EQU1": "Green Sharks",
        "NOM_EQU2": "Les Keh à mojito",
        "NOM_SPO": "Football",
        "HEURE_DEBUT_MAT": "09:00"
    },
    {
        "NOM_EQU1": "Les Assistés",
        "NOM_EQU2": "Sur le terrain 8",
        "NOM_SPO": "Volleyball",
        "HEURE_DEBUT_MAT": "09:00"
    }

The 0 represent a period, in the 0 there are all the match played at 09:00, there are 25 periods. NOM_EQU1 and NOM_EQU2 are the team names and NOM_SPO is the sport name.

EDIT : I try to explain an example of what I want to do. When I'm in the cell I want to test if the data NOM_SPO is equals to "football" if it is I write in the cell "team1 vs team2" but if it isn't I want to skip to the second array which is in the same period and try on this one and I want to do it until I find the right data. If there isn't any right data I put a "-" because there aren't any match for this sport at this period. And I want to do that for every cell, because each cell is a different sport and I have to find the right teams to put it in.

Map your data into new array with structure and output values needed to show in the view. This will make view much cleaner and removes the ugly business logic from the view — charlietfl, Jun 08 '16 at 11:56
My solution was to put a loop for directly in the expression but I don't know if it is even possible, I tried a basic syntax but it doesn't work. Since the if test has a different syntax in the expression I think it's the same for the loop for. — Isariamkia, Jun 08 '16 at 12:02
Can you maybe create a jsfiddle for your solution ? Right now it's hard to tell what's working and what is not. — sasklacz, Jun 08 '16 at 12:11

score 0 · Accepted Answer · edited May 23 '17 at 12:31

You can try to add a custom function that will "render" your data as you wish.

 $scope.myvs = function(schedule) {
    if (schedule.NOM_EQU1 != null) {
      return schedule.NOM_EQU1 + " vs " + schedule.NOM_EQU2
    }
    return "-"
  }

Then reuse it in your view like this :

<td>{{myvs(schedule)}}</td>

And this : schedule[$index] is wrong since your already iterating in the schedules with ng-repeat : use simply schedule and you can also write your ng-repeat in a more simple way ng-repeat="schedule in schedules"

Here is my jsfiddle

I could not find a cleaner way to do it, maybe a simple ng-if="schedule.NOM_EQU1" works like here, I'd rather make a custom function to handle it and write my own utility service. You should check about ng-if, ng-switch, i believe you can read this

Hope it helps

angularJS loop into ng-repeat

1 Answers1