如何在Angular HotTowel中使用ng-grid

时间：2014-02-26 19:48:11

标签： angularjs breeze ng-grid hottowel

我正在使用John Papa的Angular HotTowel，我不知道如何将Angulars ng-grid合并到html中。由于来自stondo的精彩帮助，我已经添加了这些内容。 Breeze似乎正在添加额外的信息，这些信息不允许ng-grid在网格中呈现数据。有没有办法去除微风发送的额外信息或解决ng-grid与breeze数据正常运行的问题？

 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如下所示：     （function（）{     'use strict'; 

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行，绿色箭头表示我已选择其中一行。仍然没有显示记录。

something is creating rows in the grid, but not displaying info

感谢 缺口

2 个答案:

答案 0 :(得分：1)

我不得不修改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以供参考。确保使用data-ng-controller或ng-controller =＆＃39; corrieri＆＃39;

围绕您的网格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（很明显，但比抱歉更安全）

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

答案 1 :(得分：0)

试试这个：

    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;
        });
      }
    }

这是我看到enter image description here的图片 这是我改变的代码：

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

以下是一些显示数据即将发布的其他信息。远程数据源显示1496条记录。 / breeze / breeze的预览显示数据。我已经删除了敏感信息。 enter image description here

以下是我的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;
            });
        }
    }
}
})();

controller 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>

这里屏幕现在看起来像什么。网格中仍然没有数据：

grid view

在调试中，data属性显示undefined still

mydata.data undefined

mydata确实包含数据数组

mydata containing data

vm是return语句中的空数组

vm empty array on return

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

after return

控制台显示数据存在

enter image description here

相关问题
最新问题