如何将 ng-grid 与 Angular HotTowel 一起使用

Question

我正在使用 John Papa 的 Angular HotTowel，但我不知道如何将 Angulars ng-grid 合并到 html 中。感谢 stondo 的出色帮助，这是我添加的内容。 Breeze 似乎添加了不允许 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 行，绿色箭头表示我选择了其中的一行。仍然不显示记录。

谢谢 尼克

Answer 1

我不得不修改 John Papa 的 Hottowel.Angular 模板，因为它在最新的 angular/breeze 版本中无法正常工作。稍后我将分享一个 github 链接和一篇关于此的博文。

只需将 $scope 和 $http 添加到控制器，我就可以让 ng-grid 正常工作。阅读代码块中的注释，看看如何在不注入 $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 以供参考。确保用 data-ng-controller 或只是 ng-controller='corrieri' 包围你的 ng-grid div

<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])

并且还在 index.html 中包含 ng-grid css 和 js（这很明显，但比抱歉更安全）

我努力了几天才能让它正常工作，所以我希望能帮助遇到同样问题的任何人。

Answer 2

试试这个：

    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 显示数据的预览。我已经删除了敏感信息。

这是我的数据上下文中使用实体框架的 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 确实包含数据数组

在return语句中vm是一个空数组

返回后 vm.grid 为空，我不确定 vm 也是什么

控制台显示数据存在