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

Angular JS - how to change text inside the button based on the variable value?

本文关键字：按钮 内部 文本 变量值 JS- 何根 Angular      更新时间：2023-09-26

我在模板中有以下按钮：

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

但我认为这种方法不是一个好方法，因为如果值发生变化，我注意到如果发生变化，按钮会闪烁。

只用一个按钮就能解决问题吗？

非常感谢你的建议。

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

我猜下载InProgess可用于当前作用域

我建议您执行以下操作：

<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}}%",

控制器上：

$scope.buttonText= 'DOWNLOAD_SOUNDS';

HTML

<button ng-click="downloadData()"
       class="button button-full button-outline button-positive welcomeButton">
          {{ buttonText | translate }}
</button>

在您的函数中更改范围中的值

$scope.buttonText= 'DOWNLOADING' + somevalueofpercent + '%';

它将自动更改按钮的文本，并在完成更改文本时更改其他内容

相关文章：