feedback like functionality using nested ng-repeat in angular js - angularjs

Question

I have been trying to achieve feedback like functionality using json data such that when I click on any star all the stars in the current row get selected(their css change).
Just like we normally see in the 5 star feedback.
I am currently struggle with the following code, can anyone help?
$scope.itemClicked = function (status, job) {
if (status.isActive) {
status.isActive = false;
} else {
angular.forEach(job.statuscollection, function(status) {
status.isActive = false;
});
status.isActive = true;
}
}
http://plnkr.co/edit/VA1XWWrG3pghEcWli06F?p=info
the current code allows me to select a specific item in the row, all I want is to change the css of all the Preceeding items in the row along with the current item.
any help would be really appreciated.
thanks

Answer 1

I am not sure what you are actually looking for but I think you can achieve the functionality by using loop limit with the parent index. Here's an example of code demonstration.
<div ng-repeat="fb in feedback" ng-init="outerIndex = $index">
{{fb.question}}
<br/>
<span style="margin-left:10px" ng-repeat="star in fb.stars"
ng-init="innerIndex = $index">
<button class="btn btn-default" ng-class="{ 'btn-info': star.isActive === true}" ng-click="itemClicked(star, fb)"> {{star.icon}} </button>
</span>
<br/><br/>
</div>
$scope.itemClicked = function (outer, inner) {
/* changing disabling all the items first */
for(var loop = 0; loop < outer.stars.length; loop++){
outer.stars[loop].isActive = false;
}
for(var loop = 0; loop < outer.stars.length; loop++){
if(outer.stars[loop] !== inner )
outer.stars[loop].isActive = true;
else
break;
}
inner.isActive = true;
}
http://plnkr.co/edit/1R9tqXM0yinvBQxfKNgD?p=preview
You can replace the buttons with your star icons. Hope this helps.