如何在Angular HotTowel中使用ng-grid

Question

我正在使用John Papa的Angular HotTowel，并且我不知道如何将Angulars ng-grid合并到html中。感谢stondo的帮助，我添加了这些内容。微风似乎增加了额外的信息，不允许ng-grid在网格中呈现数据。有没有办法去除微风发送的额外信息或解决ng-grid在微风数据下正常运行的方法？

angular.module('app').controller(controllerId, 
    ['common', 'datacontext','$scope', '$http', grid2]); 

function grid2(common, datacontext, $scope, $http) { 
..... 
..... 
} else { 
     $http.get('/breeze/Breeze/NoBadgePersonnels').success(function (largeLoad) { 
        $scope.setPagingData(largeLoad, page, pageSize); 
       }); 
activate(); 

function activate() { 
    common.activateController([mockData()], controllerId) 
     .then(function() { log('Activated Grid View'); }); 

function mockData() { 
    return datacontext.getEmployeePartialsNoBadges().then(function (data) { 
      return vm.grid2 = data.results; 
    }); 
    } 
} 

附加信息

Datacontext.js看起来如下： （函数（）{ '使用严格';

var serviceId = 'datacontext'; 
angular.module('app').factory(serviceId, 
    ['common', 'config', 'entityManagerFactory', datacontext]); 

function datacontext(common, config, emFactory) { 
    var EntityQuery = breeze.EntityQuery; 
    var getLogFn = common.logger.getLogFn; 
    var log = getLogFn(serviceId); 
    var logError = getLogFn(serviceId, 'error'); 
    var logSuccess = getLogFn(serviceId, 'success'); 
    var manager = emFactory.newManager(); 
    var $q = common.$q; 

    var service = { 
     getPeople: getPeople, 
     getMessageCount: getMessageCount, 
     getEmployeePartials: getEmployeePartials,  
     getEmployeePartialsNoBadges: getEmployeePartialsNoBadges 
    }; 

    var entityNames = { 
     personnel: 'Personnel' 
    }; 
    return service; 

    function getEmployeePartialsNoBadges() { 
     var orderBy = 'lname'; 
     var employees; //variable to hold employees once we get them back 

     //use query using Employees resource 
     return EntityQuery.from('NoBadgePersonnels') 
      .select('id, fname, lname, class, zip, cntySnrDte') 
      .orderBy(orderBy) 
       .toType('Personnel') 
       .using(manager).execute() 
       .then(querySucceeded, _queryFailed) 

     function querySucceeded(data) { 
      employees = data.results; 
      log('Retrieved [Employee Partials] from remote data source', employees.length, true); 
      //log('Retrieved [Employee Partials] from remote data source'); 
      return employees; 
     } 
    } 


    function _queryFailed(error) { 
     var msg = config.appErrorPrefix + 'Error retrieving data from entityquery' + error.message; 
     logError(msg, error); 
     throw error; 
    } 

=========== ====================== 看来网格看到5个项目，我查询，但项目不希望显示在单元格上。箭头表示它分配了5行，绿色箭头表示我选择了其中一行。仍然没有“ t显示记录。

感谢 缺口

Answer 1

尝试了这一点：

angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', grid]); 

    function grid(common, datacontext, $scope) { 
     $scope.gridOptions = { 
     data: 'vm.employees' 
     }; 

     activate(); 

     function activate() { 
     common.activateController([getEmployees()], controllerId) 
       .then(function() { log('Activated Grid View'); }); 
     } 

     //get data for employees 
     function getEmployees() { 
     return datacontext.getEmployeePartialsNoBadges().then(function (mydata) { 
      return vm.employees = data; 
     }); 
     } 
    } 

这里是我所看到的 的图像，并在这里被我改变了代码：

 function getEmployees() { 
      return datacontext.getEmployeePartialsNoBadges().then(function (mydata) { 
       log(JSON.stringify(mydata)); 
        return vm.employees = mydata.data; 
      }); 

这里是一些额外的信息显示数据正在通过。远程数据源显示1496条记录。/breeze/breeze的预览显示数据。我已经删除了敏感信息。

这里是我的DataContext getEmployeePartialsNoBadges（）方法，使用实体框架：

 function getEmployeePartialsNoBadges() { 
     var orderBy = 'lname'; 
     var employees; //variable to hold employees once we get them back 

     //use query using Employees resource 
     return EntityQuery.from('NoBadgePersonnels') 
      .select('id, fname, lname, class, zip, cntySnrDte') 
      .orderBy(orderBy) 
       .toType('Personnel') 
       .using(manager).execute() 
       .then(querySucceeded, _queryFailed) 

     function querySucceeded(data) { 
      employees = data.results;   //fillup the variable for employee with results 
      log('Retrieved [Employee Partials] from remote data source', employees.length, true); 
      //log('Retrieved [Employee Partials] from remote data source'); 
      return employees; 
     } 
    } 

===================== =========尼克==============================

这就是我的新样机看起来像现在，我把它放在datacontext中叫它getPeople：

 function getPeople() { 

     var people = [ 
      { firstName: 'John', lastName: 'Papa', age: 25, location: 'Florida' }, 
      { firstName: 'Ward', lastName: 'Bell', age: 31, location: 'California' }, 
      { firstName: 'Colleen', lastName: 'Jones', age: 21, location: 'New York' }, 
      { firstName: 'Madelyn', lastName: 'Green', age: 18, location: 'North Dakota' }, 
      { firstName: 'Ella', lastName: 'Jobs', age: 18, location: 'South Dakota' }, 
      { firstName: 'Landon', lastName: 'Gates', age: 11, location: 'South Carolina' }, 
      { firstName: 'Haley', lastName: 'Guthrie', age: 35, location: 'Wyoming' } 
     ]; 
     return $q.when(people); 
    } 

我重新编写了html和控制器代码来清理它们。在HTML现在叫grid2.html和控制器被称为grid2.js

(function() { 
'use strict'; 
var controllerId = 'grid2'; 

angular.module('app').controller(controllerId, 
    ['common', 'datacontext','$scope', grid2]); 

function grid2(common, datacontext, $scope) { 
    var vm = this; 
    vm.grid2 = []; 
    $scope.gridOptions = { 
     data: 'vm.grid2' 
    }; 

    var getLogFn = common.logger.getLogFn; 
    var log = getLogFn(controllerId); 
    vm.activate = activate; 
    vm.title = 'Grid2'; 

    activate(); 

    function activate() { 
     common.activateController([mockData()], controllerId) 
      .then(function() { log('Activated Grid View'); }); 

     function mockData() { 
      return datacontext.getPeople().then(function (mydata) { 
       log(JSON.stringify(mydata)); 
       return vm.grid2 = mydata.data; 
      }); 
     } 
    } 
} 
})(); 

控制器grid2.js

<section class="mainbar" data-ng-controller="grid2 as vm"> 
<section class="matter"> 
    <div class="container"> 
     <div class="row"> 
      <div class="widget wgreen"> 
       <div data-cc-widget-header title="Grid 2"></div> 
       <div class="widget-content user"> 
       </div> 
       this is grid2 test 
       <div class="gridStyle" ng-grid="gridOptions"></div> 

       <div class="widget-foot"> 
        <div class="clearfix"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

这里的屏幕是什么样子了。在网格中仍然没有数据：

在调试中，数据属性显示未定义仍然

的MYDATA确实包含数据的阵列

vm是返回语句中的空数组

的vm.grid成为回归后的空，我不能确定虚拟机什么的也是

控制台显示的数据存在

Answer 2

我不得不修改John Papa的Hottowel.Angular模板，因为它没有像前一样工作最新的角度/微风版本。我稍后会分享一个github链接和一篇博客文章。

我能够让ng-grid工作，只需将$ scope和$ http添加到控制器。阅读代码块内的注释，看看如何在不注入$ http的情况下完成它。

(function() { 
'use strict'; 
var controllerId = 'corrieri'; 
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', '$http', corrieri]); //'$http', '$scope', 

function corrieri(common, datacontext, $scope, $http) { //,$http, $scope 
    var getLogFn = common.logger.getLogFn; 
    var log = getLogFn(controllerId); 

    var vm = this; 

    $scope.corrieriList = []; 

    vm.corrieri = []; 


    vm.news = { 
     title: 'Corrieri', 
     description: 'Lista Corrieri' 
    }; 
    vm.title = 'Corrieri'; 


    //ng-grid test 
    $scope.filterOptions = { 
     filterText: "", 
     useExternalFilter: false 
    }; 
    $scope.totalServerItems = 0; 
    $scope.pagingOptions = { 
     pageSizes: [10, 20, 30], 
     pageSize: 10, 
     currentPage: 1 
    }; 
    $scope.setPagingData = function (data, page, pageSize) { 
     data = data.map(function (item) { 
      return { 
       PK_ID: item.PK_ID, 
       Ragione_Sociale: item.Ragione_Sociale, 
       Telefono: item.Telefono, 
       Nazionalita: item.Nazionalita, 
       Indirizzo: item.Indirizzo, 
       Cap: item.Cap, 
       Provincia: item.Provincia, 
       Descrizione: item.Descrizione 
      }; 
     }); 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
     $scope.corrieriList = pagedData; //.results; 
     $scope.totalServerItems = data.length;    
     if (!$scope.$$phase) { 
      $scope.$apply(); 
     } 
    }; 
    $scope.getPagedDataAsync = function (pageSize, page, searchText) { 
     setTimeout(function() { 
      var data; 
      if (searchText) { 
       var ft = searchText.toLowerCase(); 
       $http.get('breeze/Corrieri/GetCorrieri').success(function (largeLoad) { 
        var myModArray = largeLoad.map(function (item) { 
         return { 
          Pk_ID: item.Pk_ID, 
          Ragione_Sociale: item.Ragione_Sociale, 
          Telefono: item.Telefono, 
          Nazionalita: item.Nazionalita, 
          Indirizzo: item.Indirizzo, 
          Cap: item.Cap, 
          Provincia: item.Provincia, 
          Descrizione: item.Descrizione 
         }; 
        }); 
        data = myModArray.filter(function (item) { 
         return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
        }); 
        $scope.setPagingData(data, page, pageSize); 
       }); 
      } else { 
       $http.get('breeze/Corrieri/GetCorrieri').success(function (largeLoad) { 
        $scope.setPagingData(largeLoad, page, pageSize); 
       }); 
      } 
     }, 100); 
    }; 

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

    $scope.$watch('pagingOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 
    $scope.$watch('filterOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 

    $scope.gridOptions = { 
     data: 'corrieriList', 
     enablePaging: true, 
     showFooter: true, 
     showFilter: true, 
     enableCellEdit: true, 
     enableColumnResize: true, 
     enableColumnReordering: true, 
     pinSelectionCheckbox: true, 
     totalServerItems: 'totalServerItems', 
     pagingOptions: $scope.pagingOptions, 
     filterOptions: $scope.filterOptions 
    };  
    //ng-grid test end 



    activate(); 

    function activate() { 
     var promises = [getCorrieri()]; 
     common.activateController(promises, controllerId) 
      .then(function() { 
       log('Activated Corrieri View'); 
     }); 

    } 


    //This function was used to get data using Breeze Controller 
    //and I was even able to use it to bind data to ng-grid 
    //calling the function getCorrieri inside my controller and binding 
    //gridOptions data to vm.corrieri or just the name of the function (in my case getCorrieri) 
    // $scope.gridOptions = { data: getCorrieri} 
    //Be aware that since we r using a Breeze Controller data retrieved have additional 
    //informations, so we have to remove those, if we bind using vm.corrieri. 
    //I found it easier to implement paging using $http and $scope, even though I think 
    //I could do it using only $scope and breeze. 
    //getCorrieri().then(function() { 
    // angular.forEach(vm.corrieri, function (cor) { 
    //  delete cor._backingStore['$id']; 
    //  delete cor._backingStore['$type']; 
    //  $scope.corrieriList.push(cor._backingStore); 
    // }); 
    //}); 
    function getCorrieri() { 
     return datacontext.getCorrieri().then(function (data) { 
      return vm.corrieri = data.results; 
     }); 
    } 

} 
})(); 

下面你可以找到我的html供参考。确保环绕你的数据-NG-控制器或只是纳克控制器NG网格=“corrieri”

<section id="corrieri-view" class="mainbar" data-ng-controller="corrieri as vm"> 
    <section class="matter"> 
     <div class="container"> 
      <div class="row">    
       <div class="col-md-12"> 
        <div class="widget wgreen"> 
         <div data-cc-widget-header title="Corrieri" allow-collapse="true"></div> 
          <div class="widget-content text-center text-info"> 
           <div data-ng-controller='corrieri'> 
            <div class="gridStyle col-md-12" ng-grid="gridOptions"> 
           </div> 
          </div> 
          <div class="widget-foot"> 
           <div class="clearfix"></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</section> 

顺便说一句，不要忘了添加“ngGrid”在app.js你的模块列表

var app = angular.module('app', ['ngGrid', other modules]) 

还包括NG-电网CSS和JS的index.html（这是显而易见的，但有备无患）

我挣扎了几天得到这个工作正常，所以我希望能帮助那些有同样问题的人。