last day (15 days later) » 

6:51 PM
0
A: Changing ng-class when clicked (nested ng-repeat)

luxThe proper Angular way to approach this is to use ngInit to create a local variable to track the $index of a given ngRepeat. Using $parent is generally discouraged. And in the example below, we have two ngRepeats and therefore two index variables: outerIndex and innerIndex: <div class="row" n...

 
given this approach, should the $scope.selectedIndex inside the itemclicked function become $scope.outerindex?
 
lux
Yeah, if that's the variable you eventually want access to; I just reread your description, in which you stated you will have more job objects, not just one. So yes, if you want the index of the job, then you'll want to pass outerIndex to the click function.
 
Lux, I've tried your approach of replacing the ng-click function to pass in outerIndex now, and the second line of my itemClicked function, from this: $scope.selectedIndex = $index; to this: $scope.outerIndex = $index;, but the class still doesn't change when clicked
 
lux
The plunker I provided didn't actually have any CSS to apply, so I just updated it: plnkr.co/edit/v70fY30PjoTXCrhOPVZB
Let me know if exact behavior you are expecting, but in this case, we can see that the class does not apply to whichever button we click. Is this the3 expectation?
 
see if by adding an extra job (I've editted my js code above to have two entities for job), you'll see what I mean. the desired effect is for example, you have two Outers containing the 3 Inners. If you click on one of the Inner buttons in the first "job" the class changes on that Inner button for that first outer job (doesn't change the second job), and vice versa can be changed on the second job to any three inner buttons without changing anything on the first job.
here's a srnshot for more comprehensive explanation.. link
I think I got moved over to chat with you because our discussion was getting lengthy
 
lux
6:56 PM
Ok, I understand the issue a little better, and I've updated my plunker: plnkr.co/edit/v70fY30PjoTXCrhOPVZB?p=info
And since we are going to have different job objects, we might as well just attach an active property to our status when clicked, otherwise trying to keep track of numeric indexes seems too confusing
In the updated example, you'll see the following. If you click a child of JOB, then we first check to see if the status was already active (i.e. someone already clicked it). If it was active, we set active to false, and return. Otherwise, we cycle over ALL statuses in the given job, set them all to FALSE, then only set the one that was clicked to 'true'
this was we can track our selections independently.
Moreover, let's say if you select Child 1 from Job 1, and you want to deselect/inactive all other job statuses, then we can simply pass in jobs as the second argument to the ngCick, and then we iterate over each of these to set isActive to false.
Make sense?
 
yes. it will probably make more sense once the plnkr loads your most recent edit. i see the last edit from 29 minutes ago, but not the latest.
I don't think I can see your latest edits
 
lux
Should now be updated
 
ok I can see it! this is the exact functionality required.. it makes sense now looking at it.
thanks for your help. this was extremely helpful!
 
lux
Very cool, so yeah, instead of trying to track the selectedIndex, sometimes its just easier to attach a property like isActive and just look at that
No problem at all
Updated my answer for good measure in light of our discussion
 

last day (15 days later) »