时间戳

首页 > 解决方案 > 当我单击 angular.js 中的按钮时，如何添加“加载”文本？

javascript - 当我单击 angular.js 中的按钮时，如何添加“加载”文本？

问题描述

据我所知，这是进度条（正在加载），

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

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

标签： javascriptangularjs

解决方案

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

$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;
}

推荐阅读