ng-repeat로 angularJS 루프

Isariamkia

상황은 다음과 같습니다. 저는 실제로 학교에서 프로젝트를 진행하고 있습니다. 이번 여름에는 몇몇 교수들이 주최하는 스포츠 데이가있을 것입니다. 실제로 angularJS로 사이트를 만들고 있습니다.

내 문제는 모든 셀에 팀을 배치하고 일치하는 것이 없으면 "-"를 표시하고 싶다는 것입니다. 예를 들어 09:00에 축구 경기가 없으면 셀에 "-"를 넣고 다른 셀에있는 팀을 보여줍니다. 헤딩에있는 종목과 같은 종목인지 테스트하는 표현에서 직접 if 테스트로 시도했지만 6 개 미만의 경기가있을 때 팀이 올바른 셀에 들어 가지 않습니다.

나는 해결책을 생각했고 최대 6 개의 일치가 있다는 것을 알고 있기 때문에 for 루프를 사용하여 하나를 찾았지만 표현식에 for 루프를 넣는 방법을 모릅니다. 더 나은 해결책이 있다면 기꺼이 시도해 보겠습니다. 제 문제를 제대로 설명하지 않았다면 더 나은 방법으로 시도하겠습니다.

내 코드는 다음과 같습니다.

<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에서 데이터를 가져 와서 그 데이터를 객체 배열에 넣는 것입니다. 데이터 형식은 다음과 같습니다. {

"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"셀에 쓰는지 테스트하고 싶지만 그렇지 않으면 두 번째 배열로 건너 뛰고 싶습니다. 같은 기간에 이것을 시도하고 올바른 데이터를 찾을 때까지하고 싶습니다. 올바른 데이터가 없으면이 기간에이 스포츠와 일치하는 항목이 없기 때문에 "-"를 입력합니다. 그리고 저는 모든 세포에 대해 그렇게하고 싶습니다. 각 세포는 다른 스포츠이고 그것을 넣을 적절한 팀을 찾아야하기 때문입니다.

데이비드

원하는대로 데이터를 "렌더링"하는 사용자 지정 함수를 추가 할 수 있습니다.

 $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" 와 같은 간단한 작업 일 수 있습니다 . 차라리 그것을 처리하고 나만의 유틸리티 서비스를 작성 하는 사용자 정의 함수를 만들고 싶습니다 . 당신은에 대해 확인해야 겨-경우 , 스위치를 겨 , 난 당신이 읽을 수있는 생각

도움이되기를 바랍니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

input tag inside ng-repeat angularjs

분류에서Dev

AngularJS ng-repeat in this model

분류에서Dev

AngularJS : 동적 데이터로 ng-repeat

분류에서Dev

Angularjs + ng-repeat를 사용하여 여러 배열로드

분류에서Dev

AngularJS : $ scope를 충분히 빠르게 업데이트하지 않는 ng-repeat 루프의 변수

분류에서Dev

Angularjs Nested ng-repeat with conditional caluse

분류에서Dev

Angularjs ng-repeat 새 요소

분류에서Dev

AngularJs. ng-repeat 문제

분류에서Dev

AngularJs ng-repeat in group class

분류에서Dev

AngularJs ng-repeat by track by not updated

분류에서Dev

Ng repeat error on form validating angularjs dupes

분류에서Dev

Show ng-repeat selectively in AngularJs

분류에서Dev

ANgularjs: ng-repeat and nested custom directive

분류에서Dev

AngularJS - check for null item in ng-repeat

분류에서Dev

$ http 요청 및 ng-repeat 루프

분류에서Dev

Angularjs orderBy in ng-repeat not working as expected

분류에서Dev

Accessing Controller variable in ng-repeat in AngularJS

분류에서Dev

AngularJs Json Ng-repeat with Button Control

분류에서Dev

AngularJS-ng -repeat 문제

분류에서Dev

ng-repeat 루프 내에서 특정 데이터 검색 angularjs

분류에서Dev

AngularJS에서 ng-options, ng-repeat 및 ng-selected로 선택 초기화

분류에서Dev

동적 ng-model을 ng-repeat AngularJS로

분류에서Dev

ng-repeat의 AngularJS 직렬

분류에서Dev

ng-repeat 루프 내부의 ng-click을 클릭 한 요소로 분리

분류에서Dev

AngularJS ng-repeat 표현식을 JavaScript로

분류에서Dev

ng-repeat 이상한 문제가있는 Angularjs for 루프

분류에서Dev

AngularJS : ng-repeat the list but with titles and grouped by

분류에서Dev

AngularJS IF ELSE with ng-repeat

분류에서Dev

AngularJS ng-repeat in modal

Related 관련 기사

뜨겁다태그

보관