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

Question

我有一种情况，我需要操纵控制器内部的CSS - 我知道这有点是禁止 - 但在这种情况下，这是必要的，我将在下面解释。

我有一个标题和描述包含在ng-repeat的列表元素中。 我想给描述一个CSS类依赖于标题div的高度。

但是，当我试图通过控制器内的id得到'title'div的高度时，它总是只获得第一个元素内div的高度。 当我得到标题文本时，您可以明确地看到这一点。 控制器代码如下所示：

$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

在控制器中操纵DOM的原因 ：

我有一个标题和描述。 标题可以是1-2行高，具体取决于标题的长度。 如果它不适合2行，我使用'data-ellipsis'指令将省略号放在标题的末尾。 类似地，描述也使用'data-ellipsis'来表示任何溢出。

在标题和描述之间，他们需要具有125px的组合高度。 但是因为我们不知道标题的高度，我们不知道设置描述有多高。 'data-ellipsis'指令取决于CSS中设置的高度值。

因此，我需要在运行时根据标题高度设置描述类。 如果有另一种方式，我很想知道！

以下是数据省略号指令的链接： https ： //github.com/dibari/angular-ellipsis

Answer 1

问题是你为多个div分配相同的id。 getElementById返回id为title的第一个div。 解决方案很简单，为id添加索引。 使用ng-attr-id我们可以为ng-repeat块中的每个div动态创建id。 $index变量为您提供ng-repeat块的当前索引。 然后我们将$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>

的getClass

$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';
        }

    };