• 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.     <div ng-controller="dogsController as vm">
    22.       <my-grid data="vm.dogs"></my-grid>
    23.     </div>
    24.   </div>
    25.   <script>
    26.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    27.     const app = angular.module('myApp', []);
    28.  
    29.     app.controller('dogsController', function() {
    30.       this.dogs = [{
    31.           "breed": "Dachshund",
    32.           "name": "Sausage"
    33.         },
    34.         {
    35.           "breed": "Corgi",
    36.           "name": "Plop"
    37.         },
    38.         {
    39.           "breed": "Pomeranian",
    40.           "name": "Floof"
    41.         }
    42.       ];
    43.     });
    44.  
    45.     app.component('myGrid', {
    46.       bindings: {
    47.         data: '<',
    48.       },
    49.       template: '',
    50.       controller: MyController
    51.     });
    52.  
    53.     function MyController($scope, $element, $attrs) {
    54.       $scope.$evalAsync(() => {
    55.         const zgRef = document.createElement('zing-grid');
    56.         zgRef.setAttribute('caption', 'Hello Doggos');
    57.         zgRef.setAttribute('data', JSON.stringify($scope.$ctrl.data));
    58.         $element.append(zgRef);
    59.       });
    60.     }
    61.   </script>
    62. </body>
    63.  
    64. </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.     <div ng-controller="dogsController as vm">
    17.       <my-grid data="vm.dogs"></my-grid>
    18.     </div>
    19.   </div>
    20. </body>
    21.  
    22. </html>
    1. body {
    2.   background: #fff;
    3. }
    1. const app = angular.module('myApp', []);
    2.  
    3. app.controller('dogsController', function() {
    4.   this.dogs = [{
    5.       "breed": "Dachshund",
    6.       "name": "Sausage"
    7.     },
    8.     {
    9.       "breed": "Corgi",
    10.       "name": "Plop"
    11.     },
    12.     {
    13.       "breed": "Pomeranian",
    14.       "name": "Floof"
    15.     }
    16.   ];
    17. });
    18.  
    19. app.component('myGrid', {
    20.   bindings: {
    21.     data: '<',
    22.   },
    23.   template: '',
    24.   controller: MyController
    25. });
    26.  
    27. function MyController($scope, $element, $attrs) {
    28.   $scope.$evalAsync(() => {
    29.     const zgRef = document.createElement('zing-grid');
    30.     zgRef.setAttribute('caption', 'Hello Doggos');
    31.     zgRef.setAttribute('data', JSON.stringify($scope.$ctrl.data));
    32.     $element.append(zgRef);
    33.   });
    34. }