Hi, i',ve resolved all issue for the installation using apache's virtual host and i begin to develop a cms startinf from this template.
I've looking for integrate a ui-grid librariy (http://ui-grid.info/) which i've used in another project.
I follow all docs step's
bower install ui.grid --save
include ui-grid ui.grid.selection,ui.grid.pagination in app module
generate component for using grid
With test data all works fine but as soon as i try to include an apiGrid function (which works in previous project) i recived an error in console.
this is the component code:
class TicketsController{
constructor(uiGridConstants,$scope,$log){
'ngInject';
this.uiGridConstants = uiGridConstants;
this.$scope = $scope;
this.$log = $log;
//
}
well as the error says that's undefined in the function because it doesn't have access to the same this scope you should use an arrow function (() => {}) so your code would look like this:
Also, this startes uses angualar material, so, if you are planning on using it with such library you might want to take a look at some of the issues related on using the 2 libraries for example: https://github.com/angular-ui/ui-grid/issues/3210
Ok i must read better on EcmaScript6 :).
Now works fine but what grid i must use instead of uigrid?
and without $scope uigrid instatation not works
angular.js:13550 TypeError: Cannot set property 'data' of undefined at app-4c8b36e3e6.js:527 at processQueue (angular.js:15961) at angular.js:15977 at Scope.$eval (angular.js:17229) at Scope.$digest (angular.js:17045) at Scope.$apply (angular.js:17337) at done (angular.js:11572) at completeRequest (angular.js:11778) at XMLHttpRequest.requestLoaded (angular.js:11711)
Yeah, first read about how the variables in ES6 works, everything should work if you just remove .$scope from everything for example:
this.$scope.gridOptions1 = {
...
}
will look like:
this.gridOptions1 = {
...
}
I haven't use ui-grid so i don't really now what it does or what it doesn't what i use for a project of mine it's just a table with material look -> https://github.com/daniel-nagy/md-data-table
I try the md-table and all works fine except the callback function md-on-select.
If i use this.$log or another function/lib seems to not defined
this is the content of js
angular.js:13642 TypeError: Cannot read property 'log' of undefined
at Controller.openDialog (app-e27888b3ae.js:617)
at Controller.self.select (md-data-table.js:953)
at Controller.self.toggle (md-data-table.js:974)
at fn (eval at compile (angular.js:14539), <anonymous>:4:386)
at expensiveCheckFn (angular.js:15628)
at callback (angular.js:25172)
at Scope.$eval (angular.js:17378)
at Scope.$apply (angular.js:17478)
at HTMLElement.<anonymous> (angular.js:25177)
at defaultHandlerWrapper (angular.js:3487)
That's an issue with this being different inside the function
And he solved it by using the arrow function from ES6 (or ES2015).. It's called Lexical this
I don't know what you want to achieve with this expression (ng-repeat="agencies in vm.agencies | orderObject:'id'"), what is this filter for? did you wanted to sort? I'm not sure if this is what you want, but according to md-data-table example this is how you sort, limit, and pagination.
{"errors":false,"data":{"agencies":[{"id":1,"name":"Demarcus Jenkins","address":"2700 Gleichner Ramp\nSouth Augustinefurt, AL 76346-9063","phone":"+2123984609012","description":"Suscipit eaque repudiandae officiis. Est at quae quo cum asperiores ad fugiat.","country":"Anguilla","created_at":"2016-06-26 08:11:19","updated_at":"2016-06-26 08:11:19"}]}}
Everything is working fine now, but i'm getting this messages:
angular.js:13708Error: [orderBy:notarray] Expected array but received: {}
@num3r06 calling a request each time user changes sort param will create too many unnecessary request and response between server and client. You can use lodash to do lots of thing with given array or object, in that way you only need to request once.
great info...really i don't make any sort for user (it's a ticketing system and the operators MUST take first call in sequence) but this info will very useful for future development
Glad it helps. lodash is included as dependency of restangular so when you bower install laravel angular material starter it should be installed as well. You could look at https://lodash.com/docs just to get the idea lodash's features. I mostly use google search to get what I want, something like "array push in lodash" :tongue:
Hi, i',ve resolved all issue for the installation using apache's virtual host and i begin to develop a cms startinf from this template. I've looking for integrate a ui-grid librariy (http://ui-grid.info/) which i've used in another project. I follow all docs step's
generate component for using grid With test data all works fine but as soon as i try to include an apiGrid function (which works in previous project) i recived an error in console. this is the component code: class TicketsController{ constructor(uiGridConstants,$scope,$log){ 'ngInject'; this.uiGridConstants = uiGridConstants; this.$scope = $scope; this.$log = $log; // }
$onInit(){ this.$scope.data = [ { name:"name", gender:"male", company:"h" } ]; this.$scope.gridOptions1 = { enableSorting: false, data:this.$scope.data, columnDefs: [ { field: 'name' }, { field: 'gender' }, { field: 'company', enableSorting: false } ], enableRowSelection: true, onRegisterApi: function( gridApi ) { this.$scope.gridApi = gridApi; this.$scope.gridApi.selection.on.rowSelectionChanged(this.$scope,function(row){ var msg = 'row selected ' + row.isSelected + "---- "; msg += 'row selected ' + JSON.stringify( row.entity); $log(msg);
} } export const TicketsComponent = { templateUrl: './views/app/components/tickets/tickets.component.html', controller: TicketsController, controllerAs: 'vm', bindings: {} } and this is the error: angular.js:13550TypeError: Cannot set property 'gridApi' of undefined at Object.onRegisterApi (http://portale.local:8080/build/js/app-459cbda8d9.js:533:42) at Grid.renderingComplete (http://portale.local:8080/build/js/vendor-1106081468.js:64011:20) at post (http://portale.local:8080/build/js/vendor-1106081468.js:61785:16) at http://portale.local:8080/build/js/vendor-1106081468.js:9688:44 at invokeLinkFn (http://portale.local:8080/build/js/vendor-1106081468.js:9694:9) at nodeLinkFn (http://portale.local:8080/build/js/vendor-1106081468.js:9093:11) at http://portale.local:8080/build/js/vendor-1106081468.js:9433:13 at processQueue (http://portale.local:8080/build/js/vendor-1106081468.js:15961:28) at http://portale.local:8080/build/js/vendor-1106081468.js:15977:27 at Scope.$eval (http://portale.local:8080/build/js/vendor-1106081468.js:17229:28)
First of all, can you preperly format your code with 3 backticks ` please?
1.- Do you really need to use
$scope
? 2.- This startes uses EcmaScript 6 so, when you try to acces tothis.$scope
inwell as the error says that's undefined in the function because it doesn't have access to the same
this
scope you should use an arrow function (() => {}
) so your code would look like this:and that way it should work
Also, this startes uses
angualar material
, so, if you are planning on using it with such library you might want to take a look at some of the issues related on using the 2 libraries for example: https://github.com/angular-ui/ui-grid/issues/3210Ok i must read better on EcmaScript6 :). Now works fine but what grid i must use instead of uigrid? and without $scope uigrid instatation not works
angular.js:13550 TypeError: Cannot set property 'data' of undefined at app-4c8b36e3e6.js:527 at processQueue (angular.js:15961) at angular.js:15977 at Scope.$eval (angular.js:17229) at Scope.$digest (angular.js:17045) at Scope.$apply (angular.js:17337) at done (angular.js:11572) at completeRequest (angular.js:11778) at XMLHttpRequest.requestLoaded (angular.js:11711)
What i should use instead of $scope?
Yeah, first read about how the variables in ES6 works, everything should work if you just remove
.$scope
from everything for example:will look like:
I haven't use
ui-grid
so i don't really now what it does or what it doesn't what i use for a project of mine it's just a table with material look -> https://github.com/daniel-nagy/md-data-tableWithout $scope in grid definition not works. However i try another solution for grid Thx for the support
I try the md-table and all works fine except the callback function md-on-select. If i use this.$log or another function/lib seems to not defined this is the content of js
and this is the html
of the component and this is the error
try this:
Ok works fine...but you can explain this behaviour? thx for support
That's an issue with
this
being different inside the function And he solved it by using the arrow function from ES6 (or ES2015).. It's called Lexical thisok thx
Hi,
I'm trying to use md-data-table, and i'm getting this message:
index.module.js
projects-component.html
list-projects.component.js
Thanks for everything guys.
I don't know what you want to achieve with this expression (ng-repeat="agencies in vm.agencies | orderObject:'id'"), what is this filter for? did you wanted to sort? I'm not sure if this is what you want, but according to md-data-table example this is how you sort, limit, and pagination.
Thanks @milocosmopolitan, i had to adjust it a little bit:
list-projects-component.html
Btw my response looks like:
Everything is working fine now, but i'm getting this messages:
that might be because of the
.getList()
If you're using response macros just like in the documentation, you'd have to use a regularHi @jadjoubran i keep getting the same errors
Thanks for all.
Can you try defining projects in your constructor to an empty array:
I already have defined it :)
Thats because your resposne it's returning a json and restangular expect an array, in your laravel response, convert it to array instead of JSON
Hi @flick36 I know, i just wanted to keep using response macros, like the docu says :D
they're you can create your own, the ones included are more generic ones
I use doGET instead of get for restangular. So the response it's ready for use
You can probably keep using them.. can you show me the code? We might just have to collect them into an array
this is the function in component which receive data and push in the array ready for the table
@num3r06 In my opinion pushing each row of json object which already includes array of data seems redundant process.
yeah, true btw @num3r06 sorry I meant can you show the backend code
i do this because custom orderBy filter don't work for me and i need a rapid solution, The backend code (laravel side) is quite simple:
@num3r06 can you try
->get()->toArray();
@num3r06 calling a request each time user changes sort param will create too many unnecessary request and response between server and client. You can use lodash to do lots of thing with given array or object, in that way you only need to request once.
great info...really i don't make any sort for user (it's a ticketing system and the operators MUST take first call in sequence) but this info will very useful for future development
where i found a tutorial for using loadash in ES6?
Glad it helps. lodash is included as dependency of restangular so when you bower install laravel angular material starter it should be installed as well. You could look at https://lodash.com/docs just to get the idea lodash's features. I mostly use google search to get what I want, something like "array push in lodash" :tongue:
Sorry but by 'loadash' are we talking about 'lodash'?
@flick36 you are correct my bad I updated comment