Question

我在模板中有以下按钮：

<button ng-if="downloadInProgress != true"
                  ng-click="downloadData()"
                  class="button button-full button-outline button-positive welcomeButton">
              {{ 'DOWNLOAD_SOUNDS' | translate }}
          </button>

我想改变文字：

{{ 'DOWNLOAD_SOUNDS' | translate }}

到

{{ 'DOWNLOADING' | translate }} {{ downloadProgress}} {{ '%' | translate }}

如果值

downloadInProgress == true

现在我在模板中使用了两个按钮，并按变量值的顺序显示/隐藏了一个按钮：

<button ng-if="downloadInProgress != true"
                  ng-click="downloadData()"
                  class="button button-full button-outline button-positive welcomeButton">
              {{ 'DOWNLOAD_SOUNDS' | translate }}
          </button>

          <button ng-if="downloadInProgress == true && (downloadProgress >= 0 && downloadProgress < 100)"
                  class="button button-full button-outline button-positive welcomeButton">
              {{ 'DOWNLOADING' | translate }} {{ downloadProgress}} {{ '%' | translate }}
              <ion-spinner class="spinner-positive welcomePageDownloadProgressSpinner" icon="spiral"></ion-spinner>
          </button>

但我认为这种方法不是好方法，因为如果值正在改变，我注意到如果更改按钮会闪烁。

是否可以仅使用一个按钮来解决它？

非常感谢任何建议。

Answer 1

{{ (!downloadInProgress ? 'DOWNLOAD_SOUNDS' : ('DOWNLOADING' + downloadProgress +'%')) | translate }}

我想downloadInProgess可用于当前范围

Answer 2

我建议您执行以下操作：

<button class="button button-full button-outline button-positive welcomeButton"
ng-click="downloadData()">
  <span translate="downloadProgress ? 'DOWNLOADING' : 'DOWNLOAD_SOUNDS'"
  translate-values="{progress: downloadProgress}"></span>
  <ion-spinner class="spinner-positive welcomePageDownloadProgressSpinner"
  ng-if="downloadProgress >=0" icon="spiral"></ion-spinner>
</button>

使用translate标记可以防止在加载翻译键时翻译键在按钮上呈现。
由于您正在进行翻译，因此您应该使用带有值的键，并使用translation-values标记来填充它们。由于有几种语言不能以相同的方式对单词进行排序您的密钥可能类似于"DOWNLOADING": "Downloading: {{progress}}%",

Angular JS - 如何根据变量值更改按钮内的文本？

2 个答案: