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 [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.
