javascript - AngularJS 在 ng-repeat 中通过 id 访问 DOM 元素

Question

我遇到一种情况，我需要在 Controller 内部操作 CSS - 我知道这有点不可取，但在这种情况下这是必要的，我将在下面解释。

我在 ng-repeat 的列表元素中包含一个标题和一个描述。我想根据标题 div 的高度为描述提供一个 CSS 类。

但是，当我尝试通过 Controller 内的 id 获取“标题”div 的高度时，它总是只获取第一个元素内的 div 的高度。当我得到标题的文本时，你可以明确地看到这一点。 Controller 代码如下所示:

$scope.getClass = function() {

  var title = document.getElementById('title');
  var titleHeight = window.getComputedStyle(title, null).getPropertyValue("height");
  var titleText = document.getElementById('title').textContent;

  if(titleHeight == '50px') {
    return 'description-small';
  }
  else if(titleHeight == '25px') {
    return 'description-large';
  }

};

HTML 看起来像这样:

<ul>
  <li class="li-element" ng-repeat="item in itemList">      
    <div id="title" class="title" data-ellipsis data-ng-bind="item.title"></div>
    <div class="{{getClass()}}" data-ellipsis data-ng-bind="item.description"></div>    
  </li> 
</ul>

因此，根据列表中第一项的标题是否超过 1 行或 2 行，所有后续描述都会获得第一项所需的高度，无论其标题多高/多小。

我认为这与 ng-repeat 的工作方式有关，但我对此很陌生，不知道如何解决它 - 有什么想法吗？

我创建了一个 plnkr 来显示这里的问题: http://plnkr.co/edit/G1QEq62CbJ0HpNZ0FfSm

在 Controller 中操作 DOM 的原因:

我有标题和描述。标题可以有 1-2 行高，具体取决于标题的长度。如果它不适合 2 行，我将使用“data-ellipsis”指令将省略号放在标题的末尾。同样，该描述还使用“数据省略号”来表示任何溢出。

例如，标题和描述之间的组合高度需要为 125 像素。但是因为我们不知道title要多高，所以我们也不知道description要设置多高。 'data-ellipsis' 指令取决于 CSS 中设置的高度值。

因此，我需要根据标题高度即时设置描述类。如果有其他解决方法，我很想知道!

这里是数据省略号指令的链接:https://github.com/dibari/angular-ellipsis

Answer 1

问题是您将相同的 id 分配给多个 div。 getElementById 返回第一个 ID 为 title 的 div。解决方法很简单，给id加个索引。使用 ng-attr-id 我们可以为 ng-repeat block 中的每个 div 动态创建 id。 $index 变量为您提供 ng-repeat block 的当前索引。然后我们将 $index 传递给 getClass 函数，让 getClass 知道我们在谈论哪个标题。
Plunkr

更新您的代码

ng-重复

<li class="li-element" ng-repeat="item in itemList">

            <div ng-attr-id="{{'title'+$index}}" class="title" data-ellipsis data-ng-bind="item.title"></div>

            <div class="{{getClass($index)}}" data-ellipsis data-ng-bind="item.description"></div>

 </li>

获取类

$scope.getClass = function(i) {

        var title = document.getElementById('title'+i);
        var titleHeight = window.getComputedStyle(title, null).getPropertyValue("height");
        var titleText = title.textContent;

        if(titleHeight == '50px') {
            console.log("titleheight = 62px");
            console.log("titleText = " + titleText);
            return 'description-small';
        }
        else if(titleHeight == '25px') {
            console.log("titleheight = 31px");
            console.log("titleText = " + titleText);
            return 'description-large';
        }

    };