Question

我正在使用Ionic并尝试在<ion-tab>

内添加徽章样式的条件

<ion-tab title="style"
         icon-on="icon-payment_home" icon-off="icon-payment_home"
         badge-style="badge-assertive"
         badge="(calculateBadgeValue < 100) ? calculateBadgeValue + '%' : '&#10003'">
    <div class="custom-tab-scroll" ng-include src="'...'"></div>
</ion-tab>

是否可以为徽章风格添加条件？我想根据条件设置css类。

提前致谢

Answer 1

是的，理论上你可以做到。我建议你在JS（Angular）中这样做，以便添加你的自定义类。不要直接在HTMl文件中查看（查看）。

但请注意，“ ion-tab ”的属性不再是“徽章”和“徽章式”。现在它是“ tabBadge ”和“ tabBadgeStyle ”。

来源：http://ionicframework.com/docs/v2/api/components/tabs/Tab/

Answer 2

尝试这样的事情：

查看：

HELLO = ["hello", "hi"]
GOODBYE = ["goodbye", "bye"]

POLITENESS = [HELLO, GOODBYE]

FRUITS = ["apples", "bananas"]
MEAT = ["pork", "chicken"]

FOODS = [FRUITS, MEAT]

random_Words = ["shoe", "bicycle", "school"]


#Here is the triple nested list.
VOCABULARY = [POLITENESS, FOODS, random_Words, "house"]

knowWord = False
userInput = input("say whatever")

#this checks for userInput in triple nested lists
#first it checks whether the first slot in vocabulary is nested,
#if that's the case it checks if the lists wiithin vocabulary[i] is nested and goes on like that.
#when finally it comes to a list that is not nested it checks for userInput in that list.

for i in range(len(VOCABULARY)):
    #if list item is not nested
    if any(isinstance(j, list) for j in VOCABULARY[i]) == False:
            #if userinput is inside a non-nested list
            if userInput not in VOCABULARY[i]:
                continue
            else:
                #if userInput is found
                knowWord = True
                break
    #if list is nested
    else:
        continue
    for k in range(len(VOCABULARY[i])):
        if any(isinstance(l, list) for l in VOCABULARY[i][k]) == False:
                if userInput not in VOCABULARY[i][k]:
                    continue
                else:
                    knowWord = True
                    break
        else:
            continue
        for m in range(len(VOCABULARY[i][k])):
            if any(isinstance(n, list) for n in VOCABULARY[i][k][m]) == False:
                    if userInput not in VOCABULARY[i][k][m]:
                        continue
                    else:
                        knowWord = True
                        break
            else:
                continue

if knowWord == True:
    print("YES")
else:
    print("I don't know that word")

或

<ion-tab 
  ...
  badge="badge()" 
  badge-style="{{badge() ? 'badge-calm' : 'badge-assertive'}}">
  <ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>

控制器：

<ion-tab 
  ...
  badge="badge()"
  badge-style="{{badgeStyle()}}">
  <ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>

CHECK THE DEMO

Ionic V1.3 - 标签 - 徽章样式，条件为<ion-tab>

2 个答案: