Peter,
It might be worth preparing the results of getTemplate() and getModel() in
advance as mere properties of the objects. Do this in your controller
logic. This approach will increase the complexity of your otherwise clean
and simple objects, but I would expect it to help.
If that approach will not work, could you build entire rows as directive
instances, instead of just cells? That would surely speed things up.
SS
On Tuesday, August 26, 2014 4:58:01 PM UTC-4, Peter Schuermans wrote:
>
> Hey Everyone,
>
> I'm trying to build a custom grid with angular. But the performance is
> terrible.. Most likely cause I want to be able to define a custom template
> for each cell,
> since my objects can contain different object types on the same property,
> so for example:
>
> obj1.prop2 = { id: 1, name: "myName", type: 0 };
> obj2.prop2 = { description: "myDescription", isActive: true, type: 1 };
>
> To handle this I made an "contentControl" directive on which I could pass
> the template and the model.
> To pass in the template I've got a simple function that switches on the
> type property. if it has no 'type' property -> default template
> To pass in the model i check if it's a variable column, if so pass the
> property from the item as model, else take the complete item
>
> function getTemplate(item, column)
> {
> if(column.isVariable){
> var obj = item[column.property];
> if(obj && obj.hasOwnProperty("type")){
> switch(obj.type)
> {
> case 0: return 'tmpl_0';
> case 1: return 'tmpl_1';
> }
> }
> }
>
> return 'tmpl_default';
> }
>
> function getModel(item, column)
> {
> if(column.isVariable) return item[column.property];
> return item;
> }
>
> <table>
> <thead>
> <th ng-repeat="column in columns"><b>{{ column.title }}</b></th>
> </thead>
> <tbody>
> <tr ng-repeat="item in items">
> <td ng-repeat="column in columns">
> <content-control template="getTemplate(item, column)"
> content="getModel(item, column)"></content-control>
> </td>
> </tr>
> </tbody>
> </table>
>
> app.directive("contentControl", function(){
> return {
> restrict: 'E',
> scope: {
> model: '=content',
> template: '=template',
> },
> template: '<div ng-include="template"></div>',
> };
> });
>
>
>
>
> The root items (obj1, obj2) have around 40 properties.. Of which 10 are
> always of the same type and the other 30 are variable
>
> So when I tested it with 1000 items.. I had to wait around 30 secs before
> the rendering completed.
> With 100 -> 30 secs;
> With 20 -> 5 secs;
>
> Anyone an idea how to do this properly? Or is this just to complex to
> achieve with angular? (or knockout or whatever your use)
>
>
> Kind Regards,
>
> Peter
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
