Danish Aslam Danish Aslam - 5 months ago 19
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;
}
}


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

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.

Comments