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