2014-11-03 9 views
9

Il caso è il seguente: Ho un contenitore ion-tabs con diversi elementi ion-tab e diversi utenti che effettuano il login nella mia applicazione. Quello che devo fare è mostrare o nascondere gli elementi ion-tab a seconda del tipo di utente registrato.Come posso nascondere e mostrare le schede in modo condizionale in Ionics?

ho cercato di nascondere una sola scheda per verificare se è possibile e l'unica cosa che hanno lavorato è:

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

Il problema è che ho bisogno di fare questo in modo dinamico, e se io uso un direttiva come ng-show="false" o la mia direttiva per aggiungere class="ng-hide", non funziona. Non incapsulare nemmeno lo ion-tab all'interno di div e nascondere questo div.

Cosa sto sbagliando? Qualcuno può aiutarmi?

Grazie

risposta

10

Se si sta già utilizzando attributo di classe on-ioni scheda, è possibile modificarlo nel modo seguente? ...

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

E nel controller ...

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

Funziona come un fascino! Grazie mille :) – Timbergus

+0

Felice di averlo aiutato :). !! (Y) –

+0

Ha funzionato !! Buona giornata!! –

0

Hai provato a usare ng-show per chiamare una funzione?

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

E nel controller ...

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

Ho provato e non funziona. Il problema sembra apparire quando inserisco una direttiva all'interno di 'ion-tab', perché se uso' class = "ng-hide" ', funziona, ma se uso' ng-class = "..." ', non funziona Quindi non posso usare né 'ng-show' né' ng-hide'. – Timbergus

5

Molto tardi alla festa, ma ha riscontrato questo problema e ha trovato una soluzione più elegante (imho).

Utilizzando ng-spettacolo non funziona su di ioni-scheda (non so perché no) così invece usare ng-se per chiamare una funzione:

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

Poi nel controller:

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

Penso che questo sia più elegante perché significa che l'elemento non viene mai visualizzato, piuttosto che renderizzato e nascosto.

+6

Problema con questo è il rendering di altre schede prima, quindi questa scheda è sempre l'ultima (a destra) nella barra delle schede. – lilbiscuit

+0

stesso qui, cercando di vedere come mantenere la scheda in atto come rende ultimo quando si utilizza ng-if –

4

Non è necessario aggiungere classe per nascondere e mostrare la scheda ioni. Dobbiamo mantenere solo una condizione per l'attributo "nascosto" di ioni-scheda come seguenti-

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

Usando questo siamo in grado di mostrare/nascondere scheda.

+0

Ben fatto questo mantiene l'indice – LeRoy

+0

Felice di sapere che ha aiutato! –

Problemi correlati