如何在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（這是顯而易見的，但有備無患）

我掙扎了幾天得到這個工作正常，所以我希望能幫助那些有同樣問題的人。