单击 angular.js 中的按钮时如何添加 "Loading" 文本？

Question

这是我知道的进度条（正在加载），

<svg class="center-block progress-bar-round" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
            transform="rotate(-90,100,100)" stroke-linecap="round"/>
    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
    <text class="percentage" text-anchor="middle" x="100" y="130">{{progress}}%</text>
</svg>

在一个页面中，假设有“继续”按钮，但我不知道如何将此加载文本与该按钮连接起来，我该怎么做？

Answer 1

您可以在控制器中使用某种布尔值，例如

$scope.loading = false

然后在你的 html 你的按钮和你的 svg 中，它被隐藏直到 $scope.loading 为真 ng-if

<button ng-click="continue()" ng-if="!loading">Continue</button>

<svg ng-if='loading' class="center-block progress-bar-round" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
            transform="rotate(-90,100,100)" stroke-linecap="round"/>
    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
    <text class="percentage" text-anchor="middle" x="100" y="130">{{progress}}%</text>
</svg>

然后终于在你的控制器中

$scope.continue = function() {
  $scope.loading = true;
  // do the loading stuff, then when done
  // ...
  $scope.loading = false;
}

单击 angular.js 中的按钮时如何添加 "Loading" 文本？

How can I add "Loading" text when i click on a button in angular.js?

javascript

angularjs