Question

我一直在尝试使用json数据来实现功能性反馈，这样当我点击任何一颗星时，当前行中的所有星星都会被选中（他们的css更改）。就像我们通常在5星反馈中看到的那样。我目前正在努力使用以下代码，任何人都可以帮忙吗？

$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

当前代码允许我选择行中的特定项目，我想要的是更改行中所有Preceeding项目的css以及当前项目。

任何帮助都会非常感激。

感谢

Answer 1

我不确定您实际在寻找什么，但我认为您可以通过使用父索引的循环限制来实现该功能。这是代码演示的一个例子。

 <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

您可以使用星形图标替换按钮。希望这会有所帮助。

在角度js中使用嵌套ng-repeat的反馈功能

1 个答案: