堆棧內存溢出
  簡體   English   中英

如何在Angular HotTowel中使用ng-grid

[英]How do I use ng-grid with Angular HotTowel

 原文  2014-02-26 19:48:11  5   2    angularjs/ breeze/ ng-grid/ hottowel

問題描述

我正在使用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如下所示：（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行，綠色箭頭指示我已選擇行之一。 仍然不顯示記錄。

某些事情在網格中創建行，但不顯示信息

謝謝尼克

2 個解決方案

解決方案1
 1  2014-03-27 15:09:13

我不得不修改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>

順便說一句，不要忘記在app.js中的模塊列表中添加“ ngGrid” 

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

並且還在index.html中包含ng-grid CSS和js（這很明顯，但是比后悔更安全）

為了使它正常工作，我花了幾天時間，所以希望能幫助任何遇到相同問題的人。

解決方案2
 0  2014-03-07 06:08:03

試試看： 

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

============================= Nick ==================== ===========

這就是我的新模型現在的樣子，我將其放在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.data未定義

mydata確實包含數據數組

mydata包含數據

vm是return語句上的空數組

vm返回空數組

返回后，vm.grid變為空，我不確定vm也是什么

歸還后

控制台顯示存在的數據

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在Angular JS中將ng-grid與ng-tree一起使用？ 如何檢測ng-grid中的細胞變化而不僅僅是ng-grid事件的結束？ 如何使用Angular JS的ng-grid更改JSON數據？ 如何使整個Angular ng-grid可編輯？ 如何在ng-grid / ui-grid中使用下拉框作為列標題過濾器？ Angular JS：如何在ng-grid分組列中使用圖標？ 如何重新加載角度ng-grid onclick？ 如何在ng-grid中顯示嵌套的JSON數據？ 如何在ng-grid和ng-click中使用有角ng-repeat？ 如何在ng-grid中使用bindonce指令？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM