Wie kann ich Tabs in Ionics bedingt ausblenden und anzeigen?

Der Fall ist der folgende: Ich habe einen ion-tabs Container mit mehreren ion-tab Elemente und verschiedene Benutzer, die sich in meiner Anwendung anmeldet. Was ich tun muss, ist, die ion-tab Elemente je nach dem angemeldeten Benutzertyp ein- oder auszublenden.Wie kann ich Tabs in Ionics bedingt ausblenden und anzeigen?

Ich habe versucht, nur eine Registerkarte zu verstecken zu prüfen, ob es möglich ist, und das einzige, was gearbeitet haben, ist:

<ion-tab title="..." icon="..." ui-sref="..." class="ng-hide">

Das Problem ist, dass ich diese müssen dynamisch tun, und wenn ich ein verwenden Direktive wie ng-show="false" oder meine eigene Direktive hinzufügen class="ng-hide", es funktioniert nicht. Nicht einmal die ion-tab innerhalb einer div verkapseln und diese div verstecken.

Was mache ich falsch? Kann mir jemand helfen?

Dank

Quelle

2014-11-03 Timbergus

Wenn Sie bereits Klassenattribut auf Ionen Reiter sind, können Sie es wie folgt ändern können? ...

<ion-tab title="..." icon="..." ui-sref="..." class="class1 class2 {{myFunctionName()}}">

Und in Ihrem Controller ...

$scope.myFunctionName = function(){ 
    if() { 
    // return "ng-show"; 
    } else { 
    // return "ng-hide"; 
    } 
}

Quelle

2014-11-04 04:42:39

Funktioniert wie ein Charme! Vielen Dank :) – Timbergus

Froh, dass es geholfen :). !! (Y) –

Es hat funktioniert !! Haben Sie einen guten Tag!! –

Haben Sie versucht, eine Funktion aufzurufen ng-Show mit?

<ion-tab title="..." icon="..." ui-sref="..." ng-show="myFunctionName()">

Und in Ihrem Controller ...

$scope.myFunctionName = function(){ 
    //return true or false here 
}

Quelle

2014-11-03 14:25:04

Ich habe es versucht und es funktioniert nicht. Das Problem scheint zu erscheinen, wenn ich eine Direktive in 'ion-tab' setze, denn wenn ich' class = "ng-hide" 'verwende, funktioniert es, aber wenn ich' ng-class = "..." 'verwende, es funktioniert nicht. Also kann ich weder 'ng-show' noch' ng-hide' benutzen. – Timbergus

Sehr spät auf die Party hier, aber stieß auf dieses Problem und fand eine elegantere Lösung (imho).

ng-show Verwendung nicht auf Ionen Registerkarte funktioniert (nicht sicher, warum nicht) so statt ng-if verwenden, um eine Funktion aufzurufen:

<ion-tab ng-if="showElement()">

Dann in Ihrem Controller:

$scope.showElement = function() { 
    //logic to return a bool 
}

Ich denke, das ist eleganter, weil es bedeutet, dass das Element nie gerendert anstatt gerendert und versteckt wird.

Quelle

2016-06-10 07:29:41 kmcoulson

Problem damit ist, dass die anderen Registerkarten erst rendern, also ist diese Registerkarte immer die letzte (ganz rechts) in der Tableiste. – lilbiscuit

das gleiche hier, zu versuchen, zu sehen, wie man Tab am Platz hält, wie es zuletzt bei der Verwendung von NG-if –

Es muss keine Klasse zum Ausblenden und Anzeigen von Ion-Tab hinzugefügt werden. Wir müssen nur eine Bedingung für „versteckte“ Attribut von Ionen Tab wie folgenden-

<ion-tabs class="tabs-icon-top tabs-color-active-positive "> 
    <ion-tab hidden="{{condition}}" title="Home" icon-off="ion-ios-home- outline" icon-on="ion-ios-home" href="#/tab/chats"></ion-tab> 
    <ion-tab hidden="{{condition}}" title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login"> 
</ion-tab>

pflegen Mit dieser wir/auszublenden Registerkarte anzeigen.

Quelle

2016-10-20 08:56:30

Well Welled This hält tatsächlich den Index – LeRoy

Gut zu wissen, dass es geholfen! –

Wie kann ich Tabs in Ionics bedingt ausblenden und anzeigen?

Antwort

Verwandte Themen