Skip to content

Angular.js

Mathias Rangel Wulff edited this page Aug 11, 2015 · 13 revisions

Angular.js + AlaSQL

You can use AlaSQL together with Angular.js framework. Please include the file normally and not via requireJS

    $scope.exportData = function () {
        alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
    };

See simple example in jsFiddle.

Another example: Calculating average of array

In more detail

If AlaSQL recognize Angular.js it removes $$hashKey artefacts from the exporting arrays.

To remove other artefact fields you can use [REMOVE COLUMNS](Remove Columns) clause.

(Source: AlaSQL Group by Built with AngularJS Application)

For example, you can integrate these libraries it for import or export data files from MS Excel.

Export file to Excel

HTML:

    <button ng-if="$root.appInfo.model.rows"     // show excel icon only if there are rows in the grid 
        class="btn"ng-click="$root.exportData()">
    </button> 

Controller:

    $rootScope.exportData = function () {
        alasql('SELECT * INTO XLSX("list.xlsx",{headers:true}) FROM ?', 
              [$rootScope.appInfo.model.rows]);   
    };

Import data from file in client computer

Unfortunately, we cannot use ng-change because the input needs to be bound (ng-model), but it seems that type=file inputs are not supported for binding in Angular.js, so we can switch to ng-mouseleave and it worked, though we had to check in the function that a file had been chosen.

HTML:

    <input type="file" ng-mouseleave="loadFile($event)" />

Controller:

    $rootScope.loadFile = function ($event) {
        if (event.fromElement.files.length==0) {
            return(false);   // leave in case no file was chosen
        };
        alasql('SELECT * FROM FILE(?,{headers:true})', [event], function (data) {
            $rootScope.eData = data;     //  eData contains the JSON representation of the Excel sheet rows
        }); 
    };
Clone this wiki locally