상황은 다음과 같습니다. 저는 실제로 학교에서 프로젝트를 진행하고 있습니다. 이번 여름에는 몇몇 교수들이 주최하는 스포츠 데이가있을 것입니다. 실제로 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] 삭제
몇 마디 만하겠습니다