• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <!-- CDN link for AngularJS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
    
        <!-- Import zinggrid file -->
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            body {
                background: #fff;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div ng-app="myApp">
            <div ng-controller="dogsController as vm">
                <my-grid data="vm.dogs"></my-grid>
            </div>
        </div>
        <script>
            const app = angular.module('myApp', []);
    
            app.controller('dogsController', function() {
                this.dogs = [{
                        "breed": "Dachshund",
                        "name": "Sausage"
                    },
                    {
                        "breed": "Corgi",
                        "name": "Plop"
                    },
                    {
                        "breed": "Pomeranian",
                        "name": "Floof"
                    }
                ];
            });
    
            app.component('myGrid', {
                bindings: {
                    data: '<',
                },
                template: '',
                controller: MyController
            });
    
            function MyController($scope, $element, $attrs) {
                $scope.$evalAsync(() => {
                    const zgRef = document.createElement('zing-grid');
                    zgRef.setAttribute('caption', 'Hello Doggos');
                    zgRef.setAttribute('data', JSON.stringify($scope.$ctrl.data));
                    $element.append(zgRef);
                });
            }
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <!-- CDN link for AngularJS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
      
        <!-- Import zinggrid file -->
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      </head>
      <body>
        <div ng-app="myApp">
          <div ng-controller="dogsController as vm">
            <my-grid data="vm.dogs"></my-grid>   
          </div>     
        </div>
      </body>
    </html>
    body { background:#fff; }
    const app = angular.module('myApp', []);
    
    app.controller('dogsController', function() {
      this.dogs = [
        { "breed": "Dachshund", "name": "Sausage"},
        { "breed": "Corgi", "name": "Plop"},
        { "breed": "Pomeranian", "name": "Floof"}
      ];
    });
    
    app.component('myGrid', {
    	bindings: {
        data: '<',
      },
      template: '',
      controller: MyController
    });
    
    function MyController($scope, $element, $attrs) {
      $scope.$evalAsync(() => {
        const zgRef = document.createElement('zing-grid');
        zgRef.setAttribute('caption', 'Hello Doggos');
        zgRef.setAttribute('data', JSON.stringify($scope.$ctrl.data));
        $element.append(zgRef);
      });
    }