Angular JS: Laden bar auf CSV-Download von REST-Service

Ich habe den folgenden Code-Schnipsel, die REST-Dienst ruft CSV herunterzuladen.Angular JS: Laden bar auf CSV-Download von REST-Service

Jetzt plane ich Ladebalken auf Link klicken, bis CSV in den Browser heruntergeladen. Wie es geht??

Ich habe versucht, $ http zu verwenden, aber ich möchte den Inhalt nicht als Objekt anzeigen, dann in CSV konvertieren.

Gibt es Angular Funktion verfügbar, um den Link klicken zu überwachen, und das Ereignis nach Link Aktion abgeschlossen auslösen ?.

Ich habe Laden Strichcode, sondern nur die Aktion abgeschlossen Ereignis auf immer helfen müssen, nachdem die Antwort von Anker-Tag oben zurück, nicht über $ http.

würde Einige Angular Know-how sehr hilfreich sein.

Quelle

2016-06-10 David Prasad

Leider keine Antworten unten erwähnt haben mein Problem gelöst. Daher habe ich keine Antworten als Akzeptiert markiert. –

Es gibt mehrere Möglichkeiten zu erreichen, was Sie wollen. Out of the box, hier sind einige von ihnen:

ich persönlich die letzte verwenden, aber seien Sie gewarnt, dass, wenn Sie wollen Winkel Material, ich schlage vor, Sie verwenden eine stabile Version und nicht die Release-Kandidaten: D

Hier ist ein Code, Ihnen zu helfen!

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
 
    .config(function($mdThemingProvider) {}) 
 
    .controller('AppCtrl', ['$scope', '$interval', 
 
    function($scope, $interval) { 
 
     var self = this, 
 
     j = 0, 
 
     counter = 0; 
 

 
     self.mode = 'query'; 
 
     self.activated = true; 
 
     self.determinateValue = 30; 
 
     self.determinateValue2 = 30; 
 

 
     self.showList = []; 
 

 
     /** 
 
     * Turn off or on the 5 themed loaders 
 
     */ 
 
     self.toggleActivation = function() { 
 
     if (!self.activated) self.showList = []; 
 
     if (self.activated) { 
 
      j = counter = 0; 
 
      self.determinateValue = 30; 
 
      self.determinateValue2 = 30; 
 
     } 
 
     }; 
 

 
     $interval(function() { 
 
     self.determinateValue += 1; 
 
     self.determinateValue2 += 1.5; 
 

 
     if (self.determinateValue > 100) self.determinateValue = 30; 
 
     if (self.determinateValue2 > 100) self.determinateValue2 = 30; 
 

 
     // Incrementally start animation the five (5) Indeterminate, 
 
     // themed progress circular bars 
 

 
     if ((j < 2) && !self.showList[j] && self.activated) { 
 
      self.showList[j] = true; 
 
     } 
 
     if (counter++ % 4 == 0) j++; 
 

 
     // Show the indicator in the "Used within Containers" after 200ms delay 
 
     if (j == 2) self.contained = "indeterminate"; 
 

 
     }, 100, 0, true); 
 

 
     $interval(function() { 
 
     self.mode = (self.mode == 'query' ? 'determinate' : 'query'); 
 
     }, 7200, 0, true); 
 
    } 
 
    ]); 
 

 

 
/** 
 
Copyright 2016 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license. 
 
**/

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular Material Buffer Bar</title> 
 

 
    <!-- CSS --> 
 
    <link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" /> 
 
    <link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 

 

 
    <!-- Buffer Bar, there are other types of bars you can pick, I chose this one!--> 
 
    <div ng-controller="AppCtrl as vm" layout="column" layout-margin="" style="padding:25px;" ng-cloak="" class="progressLineardemoBasicUsage" ng-app="MyApp"> 
 

 
    <h4 class="md-title">Buffer</h4> 
 

 
    <p> 
 
     For operations where the user wants to indicate some activity or loading from the server, use the <b>buffer</b> indicator: 
 
    </p> 
 
    <md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}" md-buffer-value="{{vm.determinateValue2}}" ng-disabled="!vm.showList[0]"></md-progress-linear> 
 

 
    </div> 
 

 

 
    <!-- JavaScrip --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script> 
 
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    
 

 
</body> 
 

 
</html>

Darüber hinaus haben Sie auch Ladebildschirme!

https://material.angularjs.org/latest/demo/progressCircular

Quelle

2016-06-10 12:59:23

ich Angular Loading Bar verwende. Es funktioniert automatisch für $ http.

Quelle

2016-06-10 12:37:01 KRONWALLED

Wird es für den obigen Code funktionieren? nicht über $ http. –

Ich denke nicht, weil Sie nie einen Rückruf von der Operation erhalten werden. Gibt es einen Grund, warum Sie $ http nicht verwenden möchten? Ich habe deinen Grund oben gelesen, aber leider denke ich, dass ich es nicht verstehe. – KRONWALLED

Ja, $ http mich eher Objekt als Rückkehr zum Browser CSV Herunterladen von Inhalten. Hoffe etwas Hilfe früher. –

Ich denke, Sie könnten ng-klicken Sie auf auf dem ein Tag, um eine Funktion auf Ihrem Controller, der das Callout, ein Flag vor dem Callout setzt dann ändern Sie seinen Zustand auf dem Rückruf.

$scope.doCallout = function() { 
    $scope.calloutInProggress = true; 
    sendCallout(url, function(response) { 
    // do whatever 
    $scope.calloutInProggress = false; 
    $scope.$apply(); 
    } 
}

SendCallout ist eine Dummy-Funktion, verwenden Sie, was Sie wollen.

Quelle

2016-06-10 12:54:17

Angular JS: Laden bar auf CSV-Download von REST-Service

Antwort

Verwandte Themen