Feedback wie Funktionalität mit verschachtelten ng-Wiederholung in Winkel js

Question

Ich habe versucht, Feedback wie Funktionalität mit JSON-Daten so, dass, wenn ich auf einen Stern klicken alle Sterne in der aktuellen Zeile ausgewählt werden (ihre css ändern). Genau wie wir normalerweise in der 5-Sterne-Feedback sehen. Ich bin derzeit mit dem folgenden Code kämpfen, kann jemand helfen?

$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

der aktuelle Code ermöglicht es mir, ein bestimmtes Element in der Zeile zu wählen, alles, was ich will, ist die CSS aller Vorherige Elemente in der Reihe zusammen mit der aktuellen Position zu ändern.

jede Hilfe würde wirklich geschätzt werden.

dank

Answer 1

Ich bin nicht sicher, was Sie wirklich suchen, aber ich glaube, Sie die Funktionalität mithilfe von Loop-Grenze mit dem Index Eltern erreichen können. Hier ist ein Beispiel für eine Codedemonstration.

<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

Sie die Schaltflächen mit der Stern-Symbole ersetzen kann. Hoffe das hilft.