• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <!-- CDN link for AngularJS -->
    8.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
    9.  
    10.   <!-- Import zinggrid file -->
    11.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    12.   <style>
    13.     body {
    14.       background: #fff;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div ng-app="myApp">
    21.     <my-grid></my-grid>
    22.   </div>
    23.   <script>
    24.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    25.     const app = angular.module('myApp', []);
    26.  
    27.     app.component('myGrid', {
    28.       template: '',
    29.       controller: MyController
    30.     });
    31.  
    32.     function MyController($scope, $element, $attrs) {
    33.       this.dogs = [{
    34.           "breed": "Dachshund",
    35.           "name": "Sausage"
    36.         },
    37.         {
    38.           "breed": "Corgi",
    39.           "name": "Plop"
    40.         },
    41.         {
    42.           "breed": "Pomeranian",
    43.           "name": "Floof"
    44.         }
    45.       ];
    46.       $scope.$evalAsync(() => {
    47.         const zgRef = document.createElement('zing-grid');
    48.         zgRef.setAttribute('caption', 'Hello Doggos');
    49.         zgRef.setAttribute('data', JSON.stringify(this.dogs));
    50.         $element.append(zgRef);
    51.       });
    52.     }
    53.   </script>
    54. </body>
    55.  
    56. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <!-- CDN link for AngularJS -->
    8.   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
    9.  
    10.   <!-- Import zinggrid file -->
    11.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div ng-app="myApp">
    16.     <my-grid></my-grid>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. body {
    2.   background: #fff;
    3. }
    1. const app = angular.module('myApp', []);
    2.  
    3. app.component('myGrid', {
    4.   template: '',
    5.   controller: MyController
    6. });
    7.  
    8. function MyController($scope, $element, $attrs) {
    9.   this.dogs = [{
    10.       "breed": "Dachshund",
    11.       "name": "Sausage"
    12.     },
    13.     {
    14.       "breed": "Corgi",
    15.       "name": "Plop"
    16.     },
    17.     {
    18.       "breed": "Pomeranian",
    19.       "name": "Floof"
    20.     }
    21.   ];
    22.   $scope.$evalAsync(() => {
    23.     const zgRef = document.createElement('zing-grid');
    24.     zgRef.setAttribute('caption', 'Hello Doggos');
    25.     zgRef.setAttribute('data', JSON.stringify(this.dogs));
    26.     $element.append(zgRef);
    27.   });
    28. }