angularJS 循环到 ng-repeat

Question

情况如下：我实际上在学校做一个项目，今年夏天一些教授会组织一个运动日。我实际上是在用 angularJS.

创建一个网站

我的问题是我想将团队放在每个单元格中，如果没有任何匹配，我想放一个“-”。例如，如果 09:00 没有足球比赛，我会在单元格中放置一个“-”，然后在其他单元格中显示球队。我尝试直接在表达式中使用 if 测试来测试这项运动是否等于 header 中的运动，但是当比赛少于 6 场时，球队不会放在正确的单元格中。

我想到了一个解决方案并找到了一个，使用循环 for 因为我知道最多有 6 个匹配但我不知道如何在表达式中放置一个循环。如果您有更好的解决方案，我会很乐意尝试，如果我没有正确解释我的问题，我会尝试以更好的方式解决。

这是我的代码：

<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>

对于我的脚本：

// 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);
            });
    };
});

评论是法语的，我所做的是从 API 中获取数据并将这些数据放入 objects 的数组中。数据格式如下： {

"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"
    }

0代表一个时段，0里面是09:00的所有比赛，一共有25个时段。 NOM_EQU1 和 NOM_EQU2 是球队名称，NOM_SPO 是运动名称。

编辑：我试着解释一个我想做的事的例子。当我在单元格中时，我想测试数据 NOM_SPO 是否等于 "football" 如果是，我在单元格 "team1 vs team2" 中写入，但如果不是，我想跳过到同一时期的第二个数组并尝试这个，我想这样做直到找到正确的数据。如果没有任何正确的数据，我会打一个“-”，因为在这个时期没有任何比赛适合这项运动。我想对每个单元都这样做，因为每个单元都是一项不同的运动，我必须找到合适的团队来加入它。

Answer 1

您可以尝试添加一个自定义函数，该函数将 "render" 您想要的数据。

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

然后像这样在您的视图中重复使用它：

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

而这个：schedule[$index] 是错误的，因为您已经使用 ng-repeat 在计划中进行了迭代：只需使用 schedule 并且您还可以以更简单的方式编写 ng-repeat ng-repeat="schedule in schedules"

这是我的 jsfiddle

我找不到更简洁的方法来完成它，也许一个简单的 ng-if="schedule.NOM_EQU1" 可以像 here, I'd rather make a custom 函数一样处理它并编写我自己的实用程序服务。你应该检查一下 ng-if, ng-switch, i believe you can read this

希望对您有所帮助

angularJS 循环到 ng-repeat

angularJS loop into ng-repeat

angularjs

ng-repeat