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.
