AngularJS Доступ к DOM элемента по идентификатору в нг-повторе

Question

У меня есть ситуации, когда мне нужно манипулировать CSS внутри контроллера - Я знаю, что это немного нет-нет, но необходимо в этом случае, как я буду объясните ниже.

У меня есть название и описание, содержащееся внутри списка элемента в нг-повтора. Я хочу дать описание CSS-классу, зависящему от высоты заголовка.

Однако, когда я пытаюсь получить высоту «название» Див по идентификатору внутри контроллера, он всегда просто получает высоту 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 строки, все последующие описания получить высоту, необходимую для первого элемента, независимо от того, насколько высок/мал, это заголовок.

Я предполагаю, что это что-то делать с тем, как нг-повторных работ, но я довольно новыми для этого и понятия не имею, как не обойти это - какие-нибудь идеи?

Я создал plnkr, чтобы показать проблему здесь: http://plnkr.co/edit/G1QEq62CbJ0HpNZ0FfSm

ОСНОВАНИЯ ДЛЯ манипулируя DOM В CONTROLLER:

У меня есть название и описание. Название может составлять 1-2 строки в зависимости от длины заголовка. Если он не подходит для двух строк, я использую директиву «данные-эллипсис» для размещения многоточия в конце заголовка. Точно так же в описании также используется «эллипсис данных» для любого переполнения.

Между заголовком и описанием, они должны иметь комбинированную высоту 125px, скажем. Но поскольку мы не знаем, насколько высок заголовок, мы не знаем, как высоко установить описание. Директива 'data-ellipsis' зависит от значения высоты, установленной в CSS.

И поэтому, мне нужно установить класс описание в зависимости от высоты заголовка на лету. Если есть еще один способ, я очень хочу узнать!

Вот ссылка на директиву многоточие данные: https://github.com/dibari/angular-ellipsis

Answer 1

Проблема заключается в том, что ваше назначение и тот же идентификатор к нескольким дивы. getElementById возвращает первый div с идентификатором title. Решение прост, добавьте индекс в id. Используя ng-attr-id, мы можем динамически создавать идентификаторы для каждого div в блоке ng-repeat. Переменная $index дает вам текущий индекс блока ng-repeat. Затем мы передаем $index на функцию getClass, которая позволяет getClass знать, с каким названием мы говорим.
Plunkr

доработка кода

нг повторами

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

    };