angularjs和uiGrid

时间:2018-03-15 17:56:51

标签: ui-grid angularjs-1.5

我在使用带有angularjs版本的组件的ui-grid时遇到问题> 1.5。有人可以帮我给我一个方法吗?因为我没有使用范围,并且在ui-grid的文档中,角度最后是1.5

我尝试了这段代码,并没有向表格显示信息:

(function(){
    'use strict';
    angular.module('app', ['ngTouch', 'ui.grid'])
       .component('exampleComponent', {
            controller: MainController,
            controllerAs:'vm',
            templateUrl:'index.html',
            bindings:{
                propertyToBind: '='
            },
  template: `
    <div>
      <p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
    </div>
  `
        });

       function MainController($http,$log){

 vm.gridOptions = {};
 vm.gridOptions.columnDefs = [
         { name: 'ShowScope',
         //  <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
         //    cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}}  </div>'
         //'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">' 
               cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p>  '
         }
       ];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    vm.gridOptions.data = data;
  });
       }





})();
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<example-component>
  <div ui-grid="gridOptions" class="grid"></div>
</example-component>


    <script src="app.js"></script>
  </body>
</html>

0 个答案:

没有答案