I had a similar issue. What I did was to take the logic out of ng-class.
In other words, my final ng-class only ever checked booleans, never a
function:
{
selDate: col.isSelected,
selCompDate: col.isCompSelected,
available: col.isValid,
inRange: col.isinRange,
inCompRange: col.isinCompRange
}
To do this, you have to instead put the logic in a function that is called
when an event happens that could change these boolean attributes.
$scope.select(col){
angular.forEach($scope.row, function(value, key){
$scope.row[key].isSelected = value.cIndex == col.cIndex; //the
idea, not necessarily correct code
})
}
Hopefully this gives you the idea. I'd be curious if others found better
ways to do it, but this way the logic that sets the booleans is only called
when something changes that could affect it, and ng-class on the digest
cycle is not so costly.
Good luck!
On Sunday, March 9, 2014 3:05:52 AM UTC-6, yuval bar-on wrote:
>
> I'm working on a Date Range-Picker with a compare option (similar to the
> one used in Google Analytics), but I'm adding something extra - I want
> that when you hover over a date it would color all dates between the
> already chosen date and the hovered-over date, so it creates this visual
> drag effect. The problem is this causes a lot of overhead. You can check
> the entire code here <http://embed.plnkr.co/tY6kfX13uovFqW6sFdZV/preview>,
> but here's the important bit:
>
> <td ng-class="{selDate: isSelected(col),
> selCompDate: isCompSelected(col),
> available: col.isValid(),
> inRange: isinRange(col),
> inCompRange: isinCompRange(col)}"
> ng-repeat="(cIndex, col) in row" ng-click="select(col)"
> ng-mouseover="hover(col)">
> {{ cal.cal[rIndex][cIndex] | toFormat: 'DD' }}</td>
>
> See that? That's a whole lot of checking to do. But the fact is, I don't need
> all that. i.e. every td can accept a bunch of classes - selDate, selCompDate,
> available, inRange, inCompRange. The first two - they only change after a
> click event on a td. the available? That will only change after we change the
> month - a click event on one of two possible th's.
>
> in other words - How can I avoid expensive DOM changes like that, and still
> keep that logic working?
>
> Thanks in advnace, yuvi.
>
> (p.s. I also raised the question on Stackoverflow
> <http://stackoverflow.com/questions/22280007/angularjs-efficiency-problems-with-ngrepeat-and-ngclass>,
> if you want to help me over there)
>
>
--
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 angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
