4

这可能是我构建应用程序的方式的一个问题，但我一直需要能够通过我的 items 数组访问 dom 元素：

$scope.items = [{"src": src, "url": url, "title": title, "top": 0, "left": -500 }];

绑定到html：

<div class="block" ty-stacked-block ng-repeat="item in items" ng-style="{ 'top' : item.top+'px', 'left' : item.left+'px' }">
  <a href="{{ item.url }}" title="{{ item.title }}">
    <img ng-src="{{ item.src }}" alt="{{ item.title }}" />
  </a>
  <br />
  <p>{{ item.title }}</p>
</div>

基本上我有另一段代码想要通过 $scope.items 并更改 div 的位置（基于每个 div 的高度）。 

    scope.repositionItems = function() {
        _.each(scope.items, function(item) {
            // TODO get item's height somehow
        });
    };
4

2 回答 2

4

我在 div "item-{{ $index }}" 中添加了一个 id，所以我可以通过 id 从我的循环中获取它。感觉不是很“棱角分明”，但它奏效了！

<div id="item-{{ $index }}" class="block" ty-stacked-block ng-repeat="item in items" ng-style="{ 'top' : item.top+'px', 'left' : item.left+'px' }">
  <a href="{{ item.url }}" title="{{ item.title }}">
    <img ng-src="{{ item.src }}" alt="{{ item.title }}" />
  </a>
  <br />
  <p>{{ item.title }}</p>
</div>
于 2012-08-22T03:21:18.963 回答
0

我不确定为什么您的项目列表中有布局属性，希望您没有充分的理由，这会有所帮助。如果您的意图是将多个元素块堆叠在一起，每个元素块都包含来自项目的结果，那么您应该让 angular 重复这些项目，而不是自己定位它们。您在 class='block' 中的样式属性应该创建所需的间距和布局。我已将您的代码包装在一个无序列表中，并将 div 标签更改为 li 标签。您始终可以将 div 保留在 li 标签内。如果您不想用 ul 包装，请在 class="block" 中应用 float:left

    <ul>
    <li class="block" ng-repeat="item in items">
      <a href="{{ item.url }}" title="{{ item.title }}">
       <img ng-src="{{ item.src }}" alt="{{ item.title }}" />
      </a>
      <br />
      <p>{{ item.title }}</p>
    </li>
    </ul>

.block {
    background-color:#fff;
    width:400px;
    padding:10px;
    border-radius:8px;
    margin:10px;
    position: relative;
}
于 2013-05-25T00:18:37.283 回答