web-dev-qa-db-fra.com

ng-repeat - contenu pour montrer si le tableau est vide ou nul

J'ai des listes ng-repeat imbriquées profondes, et seulement dans la dernière boucle, je dois afficher un contenu alternatif si la liste était vide. Je suis novice en angulaire, j'ai vu des articles en ligne, aidez-moi, où puis-je utiliser le contenu si la liste est vide. Le ng-repeat=sessions in day pourrait être vide.

<ul class="day">
        <li ng-repeat="sessions in day">
            <ul class="table-view">
                <li class="table-view-cell" ng-repeat="(heading, session) in sessions">
                    <span class="group">{{heading}}</span>
                    <ul class="cell">
                        <li class="cell-content" ng-repeat="val in session" ng-click="getSession(val.id)">
                            <div class="time" style="background-color:#{{val.color}}">
                                <span>{{val.start | date:"h:mma"}}</span>
                                <span>to</span>
                                <span>{{val.end | date:"h:mma"}}</span>
                            </div>
                            <div class="session" ng-class-odd="'odd'" ng-class-even="'even'">
                                <span class="name">{{val.name}}</span>
                                <span class="room">Room: {{val.room}}</span>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
angularjsng-repeat
13
user3610227

1). Approche CSS. J'utilise généralement une approche CSS pure dans de tels cas. Avec ce balisage (extra-html supprimé):

<ul class="day">
    <li ng-repeat="sessions in day">
        ...
    </li>
    <li class="no-sessions">
        No sessions on this day.
    </li>
</ul>

et des règles CSS pour masquer .no-sessionsli par défaut et ne le rendre visible que s'il n'y a pas de balises li précédentes:

li.no-sessions {
    display: block;
}
li + li.no-sessions {
    display: none;
}

Ainsi, lorsque le tableau sessions est vide, aucun li ne sera rendu et seulement no-sessions un sera visible. Et si se cachera dès qu'il y aura au moins une session ce jour-là.

Démo: http://plnkr.co/edit/KqM9hfgTTiPlkdmEevDv?p=preview

2). Approche ngIf . Bien sûr, vous pouvez utiliser ngIf/ngShow directives pour afficher l'élément no-records lorsque le tableau sessions est vide:

<li ng-if="!day.length">
    No sessions on this day.
</li>
33
dfsq

Je pense que cela fonctionnerait pour votre cas:

    <li ng-hide="day.length > 0">
        No sessions on this day.
    </li>

Aucun CSS supplémentaire n'est nécessaire. Suppose que day est un tableau.

http://plnkr.co/edit/WgDviOKjHKS1Vt5A5qrW

6
Jazzy

Je recommanderais de gérer cela dans votre contrôleur. Garder votre logique dans le contrôleur et le javasript rend le débogage plus facile et plus facile à gérer. Je peux penser à 2 approches: utiliser ng-show/ng-hide ou une condition pour votre variable day lorsqu'elle est vide.

Option 1

ng-show/ng-hide approche:

$scope.isDayEmpty = function(){
    return $scope.day.length > 0 ? false : true;
}

html:

<ul class="day">
    <li ng-repeat="sessions in day" ng-hide="isDayEmpty">
        ...
    </li>
    <li ng-show="isDayEmpty">
        No Sessions this Day
    </li>
</ul>

Option 2:

ng-repeat approche

if($scope.day.length == 0){
    $scope.day.Push("No Sessions this Day");
}

Cela devrait vous donner essentiellement le même résultat. La première approche faciliterait votre style CSS en supposant que vous vouliez faire quelque chose de différent dans ce cas.

La deuxième approche peut varier dans le style en fonction de votre code, mais c'est un exemple de la façon dont vous pouvez le faire. Je ne connais pas votre javascript donc je ne peux pas être plus spécifique à votre scénario.

4
xv47