ng-grid | 易学教程

How to inject $http service into the ng-grid csv export plugin

阅读更多关于 How to inject $http service into the ng-grid csv export plugin

I am trying to tackle a TODO in the ng-grid csv export plugin : "add a config option for IE users which takes a URL. That URL should accept a POST request with a JSON encoded object in the payload and return a CSV. This is necessary because IE doesn't let you download from a data-uri link" However, because of my somewhat limited understanding of AngularJS, ng-grid and ng-grid plugins, I am struggling with how to access the $http service (which I need to use to post the data) from within the plugin. I think I need to inject it but everything I've tried so far has failed. I'm intending to attach

jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

阅读更多关于 jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

I am trying to bring jQuery Sparkline at each row in one cell in ng-grid. The column contains numeric array data. Plunkr --> http://plnkr.co/edit/1eNEcx6FQWcJynlVYvFw?p=preview I am using directive with cell template to achieve this. Cell Template: Directive: app.directive('ngAge', function() { return{ restrict: 'C', replace: true, translude: true, scope: {ngAgeData: '@'}, template: '<div>' + '<div class="sparklines"></div>' + '</div>', link: function(scope,element,attrs){ // var arrvalue= "3386.24000,1107.04000,3418.80000,3353.68000,4232.80000,3874.64000,3483.92000,2735.04000,2474.56000,3288

How to hide rows in ng-grid

阅读更多关于 How to hide rows in ng-grid

问题 Background: I've been working on converting few pages in our applications to use AngularJS as an attempt for major architecture overhaul. So far Angular had proven to be friendly to me while its learning curve is pretty sharp, but that's okay. In one of our main page, we have slickgrid and I had decided to use ng-grid instead of slickgrid to save myself from headache in my first pass. Due to the nature of our app, the same data will be filtered/un-filtered many times throughout the page

Updating selected rows into ng-grid

阅读更多关于 Updating selected rows into ng-grid

I am updating the list of selectedItems but the selections (checkboxes) on the UI are not getting updated for the same. index.html <body ng-controller="MyCtrl"> <div class="gridStyle" ng-grid="gridOptions"></div> <h3>Rows selected</h3> <pre>{{selectedRows}}</pre> <button ng-click="selectAdam()">Select Adam</button> </body> main.js var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.myData = [{name: "Sam", age: 50}, {name: "Peter", age: 43}, {name: "Jacob", age: 27}, {name: "Scott", age: 29}, {name: "Adam", age: 34}]; $scope.selectedRows = [];

angularjs ng-grid: parent child relations between the rows (hide/show rows)

阅读更多关于 angularjs ng-grid: parent child relations between the rows (hide/show rows)

问题 I'm trying to implement rendering the ng-grid with predefined hidden rows and on some particular event I want to show them. I'm trying to simulate kind of parent-children relation between rows, but all rows will be rendered and placed in usual manner. By default the "child" rows will be rendered as "collapsed" When the parent item is clicked the children rows will be shown as expanded I'm trying to find some solutions with gridOptions rowTemplate settings, but I hope somebody has already

ngGrid scroll vertically keeps jumping back up

阅读更多关于 ngGrid scroll vertically keeps jumping back up

问题 This bug happens on IE9, it probably happens in earlier version of IE as well. The bug cannot be reproduced on Chrome. ngGrid, scrolling with mouse does not scroll the page down. It keeps jumping back to same location. You need to use the scroll bar on browser edge to get down the page. 回答1: The problem is in the ngGridDirectives.directive'ngViewport' in the ngGrid js . It tries to focus on 'top' element, and this causes flickering/jumping. Solution: Look for element bind mousewheel elm.bind(

AngularJS Change multiple row selection ng-grid attribute on key down

阅读更多关于 AngularJS Change multiple row selection ng-grid attribute on key down

问题 I have a following grid defined in my View <div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div> And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller. $scope.resultsOptions = { data: 'searchData', selectedItems: $scope.mySelections, multiSelect: false, enableHighlighting: true, enableRowSelection: true }; In the same controller I have the following code that sets multiSelect to true. $("#resultsGrid"

AngularJS ng-grid - Dynamically updating the columns and results

阅读更多关于 AngularJS ng-grid - Dynamically updating the columns and results

问题 I am newbie in ng-grid. How do we dynamically update the columns and results inside the grid. I have created a http://plnkr.co/edit/CwUVIzSKVNCMTgpOW87f?p=preview Script var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}]; $scope.gridOptions = { data: 'myData', columnDefs: [{field: 'name', displayName: 'Name

Any better approaches in achieving multi-column grouping in UI-Grid header?

阅读更多关于 Any better approaches in achieving multi-column grouping in UI-Grid header?

问题 I've tried to achieve the multi column grouping at column header level for UI-Grid with the below approach. Steps I've followed: Include the below header cell template, of the UI grid, with another "UI Grid row": <div class="ui-grid-header custom-ui-grid-header"> <div class="ui-grid-top-panel"> <div class="ui-grid-header-viewport"> <div class="ui-grid-header-canvas"> <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()"> <div class="ui-grid-header-cell-row"

ngGrid double click row to open pop-up for editing a row

阅读更多关于 ngGrid double click row to open pop-up for editing a row

How would I go about implementing a double-click event in ng-Grid? More particularly, I want the double-clicking to open a pop-up modal(Angular UI Modal) for editing. Any ideas on how to do this? In ng-grid 2.0.11, do a simply call to ng-dblclick directive in row template $scope.gridOptions = { data: 'gdDtA', rowTemplate: '<div ng-dblclick="foo(row)" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>', }; $scope.foo = function(r) { console.log(r); } See in: https://github