AngularJS Zugriff auf DOM-element-id innerhalb von ng-repeat

Ich habe eine situation wo ich brauche zum Bearbeiten der CSS innerhalb einer controller - ich weiß, das ist ein bisschen ein no-no, aber es ist notwendig, in diesem Fall, wie ich unten erklären.

Habe ich einen Titel und eine Beschreibung enthalten, die innerhalb einer Liste ein element in einem ng-repeat. Ich möchte die Beschreibung einer CSS-Klasse abhängig von der Höhe der Titel-div.

Jedoch, wenn ich versuche, um die Höhe der 'Titel' div-id in der Steuerung, es immer wird nur die Höhe von dem div in dem ersten element. Sie können sehen, dass dies explizit, wenn ich den text des Titels. Im controller code sieht wie folgt aus:

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

};

Den HTML sieht wie folgt aus:

<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>

So, abhängig davon, ob das erste Element in der Liste hat einen Titel, über 1 oder 2 Linien, die alle nachfolgenden Beschreibungen erhalten Sie die erforderliche Höhe für den ersten Artikel, unabhängig davon, wie groß/klein es ist, den Titel ist.

Ich nehme an, dies ist etwas zu tun, wie ng-repeat funktioniert, aber ich bin ziemlich neu hier und habe keine Ahnung, wie man sich es - irgendwelche Ideen?

Habe ich einen plnkr zu zeigen, hier das problem:
http://plnkr.co/edit/G1QEq62CbJ0HpNZ0FfSm

GRUND FÜR DIE MANIPULATION VON DOM-CONTROLLER:

Habe ich einen Titel und eine Beschreibung. Der Titel kann 1-2 Linien hoch, je nach Länge der Titel. Wenn es nicht passt auf 2 Linien, ich bin mit dem 'Daten-Ellipse' - Direktive zu setzen Auslassungszeichen am Ende des Titels. Ebenso die Beschreibung verwendet auch die 'Daten-Ellipse' für jeden überlauf.

Zwischen dem Titel und der Beschreibung, die Sie brauchen, um haben zusammen eine Höhe von 125px, sagen. Aber weil wir nicht wissen, wie groß der Titel wird, wissen wir nicht, wie hoch, um die Beschreibung. Die "Daten-Ellipse" - Richtlinie richtet sich nach dem Wert der Höhe festgelegt, in der CSS.

Also, ich brauche, um die Beschreibung abhängig von der Klasse auf den Titel, der Höhe, auf der die Fliegen. Wenn es einen anderen Weg, um dieses, ich bin begierig zu erfahren!

Hier ist ein link zu den Daten Auslassungszeichen Richtlinie: https://github.com/dibari/angular-ellipsis

Sollten Sie nicht manipulieren, mit DOM-controller. Und natürlich können Sie nicht dupliziert haben ids. "Wenn es einen anderen Weg, um dieses, ich bin begierig zu erfahren!". Zunächst könnte man es machen, nur mit CSS. Aber wenn mit JS dann müssen Sie schreiben-Richtlinie und halten controller sauber.
wie könnte ich das mit CSS? Die Ellipse-Richtlinie verlangt, dass die Höhe wissen, wie zu tun, ist es Auslassungszeichen-ing... Außerdem habe ich nie geschrieben, eine Richtlinie vor, und es würde mir eine Menge Zeit, um zu beschleunigen, die für dieses kleine Stück Arbeit...

InformationsquelleAutor Tom O'Brien | 2015-12-04

Das problem ist, dass Ihr die Zuordnung der gleichen id auf mehreren divs. getElementById ist wieder in die erste div mit der id title. Die Lösung ist einfach, fügen Sie einen index auf der id. Mit ng-attr-id können wir dynamisch erstellen-ids für jedes div in der ng-repeat-block. Die $index variable gibt den aktuellen index der ng-repeat-block. Dann passieren wir die $index zu den getClass - Funktion können die getClass zu wissen, welche Titel wir sprechen.

Plunkr

UPDATES, UM IHREN CODE

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

    };

Cheers Daniel - das ist genau das, was ich suchte...

InformationsquelleAutor Daniel Kobe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.