javascript - Angular : Using a sprite sheet with ng-repeat

Question

所以我有一个 107x3280 的 Sprite

它是垂直堆叠的 107x80 缩略图的集合(准确地说是 41 个缩略图)。

我正在尝试使用 sprite 方法和 background-position 来显示缩略图

<ul id="list" class="unstyled">
  <li id="listItem{{slide.slideIndex}}">
    <span class="thumbnail" style="background: url(resources/slides/thumbs.jpg) no-repeat;" ng-style="getSpriteStyle($index)"></span>
    <span class="listItemText">
      <b>{{slide.slideIndex + 1}}. </b>{{slide.title}}
    </span>
  </li>
</ul>

我创建了一个名为 getSpriteStyle($index) 的函数，但它似乎不起作用。

$scope.getSpriteStyle = function(id)
{
    log('background-position: 0 ' + (id * 80) + 'px;');
    return 'background-position: 0 ' + (id * 80) + 'px;';
}

该函数在控制台中完美跟踪:

background-position: 0 0px;
background-position: 0 80px
background-position: 0 160px;
background-position: 0 240px;
background-position: 0 320px;
// etc

这样做似乎仍然只显示第一个缩略图。就像 ngStyle 实际上并没有定位任何东西。谁能看到我做错了什么吗？

Answer 1

文档中的 ngStyle:

表达式求值为一个对象，其键是 CSS 样式名称，值是这些 CSS 键的对应值。

您从 $scope.getSpriteStyle 返回一个字符串，而不是一个对象。

$scope.getSpriteStyle = function(id)
{
    log('background-position: 0 ' + (id * 80) + 'px;');
    return {"background-position": '0 ' +(id * 80) + 'px;'};
}