Hi Eric, I'll make a plunk of my solution when I'm done.
I'll be a bit embarrassed of my organization though, I'm just getting used to the angular way, I'll need to organize and reduce my code first. I see your points, not sure my head is around them yet but I will have a look today. I am toggling .selected on the user object in the controller. I know I need to move it out of the controller. I'm just use $scope.filteredUsers for shift clicking events. It is working, but your ideas sound like a nice improvement. Thanks! On Thursday, August 7, 2014 2:30:07 AM UTC-4, Eric Miller wrote: > > Whoaaaah Buddy. > > It reads like your problem is in your persistence structure. > > How do you plan to store the selection state? You're right, you can't use > `$index`. I said `index` but didn't emphasize the difference. > > I persist my selections by index into the full data set, not the ng-repeat > display area. I couldn't rely on ids (if you create something it doesn't > have an id until the server responds to the POST). If you CAN rely on ids, > I'd suggest that. > > Mostly, think about your persistence strategy. If it's not going to work > on a whiteboard, it's not going to work on code. Write it out. Make sure it > works when you switch the shift+click. Make sure it works when you > crtrl+click to deselect something in the middle of a span selection. The > simplest algo I could think of had the three pieces of state I mentioned. > > You can't really set them on the objects themselves. You make a separate > thing, an angular factory, maybe you call it `selectionModel`. This thing > is your components interface into selection. It has anything you need to > interact with selections. Maybe selectionModel.selectedItems, and > selectionModel.isSelected(myItem), and selectionModel.makeSelection(items). > It's your interface for everything. If you isolate the problem, you can > solve the algo separate from the UI. As long as > selectionModel.isSelected(myItem) returns the correct true or false answer, > you can drive the UI however you want. > > This is just what I did though. Maybe it won't work for you. Probably I'm > not as aligned with your exact problem as you'd like. What I can tell you > is dropping flags onto the objects themselves just isn't enough state to > get the behavior you want if you're emulating a file system's selection > model. > > On Thursday, July 31, 2014 6:38:20 AM UTC-7, Skattabrain wrote: >> >> Thanks for your post Eric. >> >> I wish I could say it's fun, I'm under deadline. It was my bright idea to >> bring Angular in as a solution for dealing with xx,xxx rows at a time... I >> literally started learning AngularJS 2 weeks ago... I'm feeling the heat to >> solve this problem. We were using DataTables & jQuery but had to limit our >> data set to a few thousand rows and even that was sluggish but I could >> manage about 4000. We want to manage the entire record set which is between >> 10K and 15K depending on the client. >> >> Angular has been handling it like a champ... but man it's a paradigm >> shift in how you do things... and yes, this problem is not trivial but >> makes all the tutorials I've seen look trivial! lol >> >> So regarding 1, 2 & 3... that is what I am currently doing and that is >> working. Using shift I end up with 2 indexes... the start and the end. >> >> I am using* logic in the controller to mark an item in the scope to >> selected true or false*. This is my problem with Shift select... I can >> only get the correct range if my ngRepeat is unsorted and unfiltered. As >> soon as I filter or change the sort order... $index is useless to me as the >> indexes don't line up with the scope. Could you elaborate on this >> specifically? >> >> How do you select the range, regardless of the state of the view? And >> paging throws another problem into the mix... but at this point, I'd like >> to get it working just on the current page of results. >> >> >> >> >> On Thursday, July 31, 2014 1:28:44 AM UTC-4, Eric Miller wrote: >>> >>> Heheh. This is a surprisingly hard problem, to emulate file system >>> selection behavior. I enjoyed this one myself :) >>> Not really angular-specific, but it's fun. As far as I know nobody has >>> written a lib for it. It's tough to isolate a selection model from UI and >>> data dependencies, so you're probably on your own to build it. >>> >>> Here's how I solved it (as I recall). >>> >>> 1: Click by itself deselects everything, then selects whatever you >>> clicked, unless it was selected, then it deselects this. Subtle difference >>> from... >>> 2: CTRL click toggles. This is easy. >>> 3: Either click or CTRL click sets a "lastSingleClick" variable. This is >>> your anchor for the shift click. >>> 4: Shift click selects from your "lastSingleClick" until the clicked >>> index. Your selection model knows the full set of selections, but you need >>> to separately store "currentSpanSelection"s, because... >>> 5: Every time you shift click, the first thing you do is deselect >>> everything in "currentSpanSelections", because the behavior file systems >>> show is spans fipping around if you change what you shift+click on. >>> >>> So the total set of selection data you need for this algo is: >>> >>> * currentSpan = [] // array of the most recent shift selected span >>> * lastSingleClick = 3 // the index of the last single click that >>> happened, naked or CTRL. >>> * selections = [] // all of the selections >>> >>> >>> >>> On Wednesday, July 30, 2014 1:50:30 PM UTC-7, Skattabrain wrote: >>>> >>>> Hello, >>>> >>>> So my Angular JS dilemma of the day is with a shift/control select >>>> feature I am implementing on a table. Here is the scenario.. >>>> >>>> >>>> - I have a large list - $scope.users >>>> - I can sort and filter this list >>>> - it's a huge list... 10K + >>>> - I use paging (and the performance is incredible... as if there >>>> were hundreds not thousands of records) >>>> - Clicking a row toggles true/false on a property "selected" >>>> - I have buttons that add/remove "selected" users to a new list and >>>> then I send it off to the server via ajax >>>> >>>> I have CTRL click implemented and working.... SHIFT is giving me >>>> trouble. >>>> >>>> I get the last selected record index, then the current (when SHIFT is >>>> depressed) and that's good... however changing the sort order changes the >>>> UI but I'm setting selected from my controller... which is looking at >>>> $scope.users and not the view currently in ngRepeat. If I could get the >>>> right order to the scope I think I could get this working in conjunction >>>> with pagination. >>>> >>>> So shift select user #1 on page 1 and with user #50 on page #3 would >>>> get users 1 - 50. >>>> >>>> Any ideas on this? I can't seem to find anything... and AngularUI does >>>> shift select... however if you try it in their paging it doesn't work. >>>> >>>> Any input would be greatly appreciated! >>>> >>> -- 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.
