javascript - 使用 Angular 的类似选择框的老虎机

Question

我正在尝试为我的元素构建一个老虎机类型选择器，但遇到了问题。我在页面右侧有一个弹出窗口，用户可以打开该弹出窗口以提供页面不同部分的反馈。

![示例] /image/u2Jop.jpg

借助上下按钮，用户可以选择他想要的部分。

我应该使用 ng-repeat

我该怎么做？

这是 plunkr 链接

http://plnkr.co/edit/0a6EcJZOOM7t8lTUL4Xt?p=preview

Answer 1

是的，使用 ng-repeat 在这里将是一个不错的选择。因为它允许统一元素标记并轻松更新显示槽的数量。

HTML

<p ng-repeat="slot in slots" ng-class="[{'active-slot': (index === slot)}, 'slot']">
    {{items[slot].name}}
</p>

Controller

  $scope.slots = [0, 1, 2];
  $scope.index = 0;
  function recalculateSlots(){
    $scope.slots[0] = Math.min(Math.max($scope.index-1, 0), $scope.items.length-3);
    $scope.slots[1] = $scope.slots[0] + 1;
    $scope.slots[2] = $scope.slots[0] + 2;
  }
  $scope.goUp = function(){
    $scope.index = Math.max($scope.index-1, 0);
    recalculateSlots();
  };
  $scope.goDown = function(){
    $scope.index = Math.min($scope.index+1, $scope.items.length-1);
    recalculateSlots();
  };

相关样式

.slot {
  margin: 0;
}

.active-slot{
  color: blue;
}

Updated plunker