Jak mogę ukryć i pokazać karty warunkowo w Ionics?

Question

Obudowa jest następująca: Mam kontener ion-tabs z kilkoma elementami ion-tab i różnymi użytkownikami, którzy logują się do mojej aplikacji. Co muszę zrobić, to pokazać lub ukryć elementy ion-tab w zależności od zalogowanego typu użytkownika.

starałem się ukryć tylko jedną kartę, aby sprawdzić, czy jest to możliwe i jedyną rzeczą, która nie pracowała to:

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

Problemem jest to, że muszę to zrobić dynamicznie, a jeśli używam dyrektywa taka jak ng-show="false" lub moja własna dyrektywa, aby dodać class="ng-hide", to nie działa. Nawet nie obudowując ion-tab wewnątrz div i ukryć ten div.

Co robię źle? Czy ktoś może mi pomóc?

Dzięki

Answer 1

Jeśli już przy użyciu atrybutu class-jonowej na karcie, można go zmodyfikować w następujący sposób? ...

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

A w kontrolerze ...

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

Answer 2

Czy próbowałeś użyć programu ng-show do wywołania funkcji?

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

A w kontrolerze ...

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

Answer 3

Bardzo późno na przyjęcie tutaj, ale napotkał ten problem i znalazł bardziej eleganckie rozwiązanie (imho).

Korzystanie ng-show nie działa na karcie jonowej (nie wiem dlaczego nie), więc zamiast używać NG-jeśli do wywołania funkcji:

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

Następnie w kontrolerze:

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

Myślę, że jest to bardziej eleganckie, ponieważ oznacza, że ​​element nigdy nie jest renderowany, a nie renderowany i ukryty.

Answer 4

Nie ma potrzeby dodawania klasy, aby ukryć i pokazać kartę jonową. Musimy tylko jeden warunek utrzymania atrybut "ukryty" Ion-tab jak following-

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

Korzystanie może to my show hide kartę /.