Question

所以我有一个107x3280的精灵

它是垂直堆叠的107x80缩略图的集合（准确地说是41张缩略图）。

我正在尝试使用带有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;'};
}

Angular：使用带有ng-repeat的精灵表

1 个答案: