Danish Aslam Danish Aslam - 4 months ago 13x
AngularJS Question

feedback like functionality using nested ng-repeat in angular js

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;


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.



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">

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


  $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;

          inner.isActive = true;


You can replace the buttons with your star icons. Hope this helps.