Question

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

我在ng-repeat中的list元素中包含了标题和描述。我想给描述一个CSS类，它取决于标题div的高度。

然而，当我试图获得“标题”的高度时，在控制器内部的id，它总是只获得第一个元素内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行的标题，所有后续描述都获得第一项所需的高度，无论其标题的高度/小高。 / p>

我认为这与ng-repeat的工作方式有关，但我对此并不熟悉，也不知道如何绕过它 - 任何想法？

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

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

我有一个标题和描述。标题可以是1-2行高，具体取决于标题的长度。如果它不适合2行，我使用的是＆＃39;数据省略号＆＃39;将省略号放在标题末尾的指令。同样，该描述也使用了＆＃39;数据省略号＆＃39;任何溢出。

在标题和描述之间，他们需要具有125px的组合高度。但是因为我们不知道标题的高度，我们不知道设置描述有多高。＆＃39;数据省略＆＃39;指令取决于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-repeat

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

    };

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

1 个答案: