Simple angularjs-ux-datagrid example

by Danish Farman

HTML

<script src="https://rawgithub.com/webux/ux-angularjs-datagrid/master/build/latest/angular-ux-datagrid.js"></script>
<div data-ng-controller="simpleArray" data-ux-datagrid="items" class="datagrid" data-options="{templateModel:{templates:myTemplates}}">
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.datagrid {
    position: relative;
    width: 100%;
    height: 100%;
}
.row {
    height: 16px;
    border-bottom: 1px solid #000000;
}
.datagrid-row > * {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}
.uncompiled > * {
    visibility: hidden;
    opacity: 0;
}
.compiled > * {
    opacity: 1;
}

JavaScript

window.simpleArray = function ($scope) {
        var i = 0, records = 100;
        $scope.items = [];
        while (i < records) {
            $scope.items.push({id: i});
            i += 1;
        }
        $scope.myTemplates = [
            {
                template: '<div class="row"><span>{{item.id}}</span></div>',
                name: 'default',
                item: 'item',
                base: null
            }
        ];
    };

    angular.module('app', ['ng', 'ux']);
    angular.bootstrap(document, ['app']);