Variable in ng-style basierend auf anderen DOM-Elementen verwenden

Ich habe zwei Tabellen (.table1 und .table2), die Seite für Seite in separaten DIVs auf einer Seite sitzen und unabhängig vom Inhalt die zweiten Tabellenzeilen mit der Höhe übereinstimmen sollen der ersten Tabellenzeilen, so dass sie perfekt ausgerichtet sind. Die erste Tabelle wird unter Verwendung von ng-repeat auf Basis von Werten aus einer Datenbank erstellt, so dass die Höhe variieren kann - so wie die äquivalente Zeile in der zweiten Tabelle immer übereinstimmen sollte.Variable in ng-style basierend auf anderen DOM-Elementen verwenden

Ich habe viele verschiedene Ideen versucht, aber dachte, dass die Verwendung eines jQuery-Selektors im ng-style für table2-Zeilen funktionieren könnte (siehe unten), tut es aber nicht;

 <tr ng-style="{'height': $('.table1 tr').eq('$index').height()+'px' }"></tr>

oder

 <tr ng-style="{'height': $('.table1 tr:nth-child($index).height()+'px' }"><tr>

offensichtlich nicht funktioniert, aber wenn ich den jQuery-Selektor mit einem bestimmten Wert, der es Arten der Zeile wie erwartet zu ersetzen;

 <tr ng-style="{'height': 50+'px'}></tr>

Ich bin nicht viel Aufhebens über jQuery verwenden, aber es anderswo so keine Probleme mit, dass ich mit, aber im Grunde möchte ich nur Höhe der Zeilen auf der Grundlage der Zeilenhöhe der ersten Tabelle in jeder Tabelle auszurichten (.Tabelle 1). Also die Frage ist, wie bekomme ich den Höhenwert einer Zeile in Tabelle1 und wenden Sie es als Höhe der gleichen Zeile in Tabelle2 mit eckigen?

Quelle

2016-04-25 jTrouble

Wenn Sie es heraus in eine Funktion abstrakt nennen funktionieren sollte - dh 'Höhe' : $ scope.getHeight ('. table1 tr') und die Rückgabe als String haben. Die Jquery wird innerhalb des Winkelreglers arbeiten. – dmoo

Verwenden Sie einfach CSS, nth-Kind-Selektoren. Dies ist sehr schlecht für die Leistung. –

Gibt es einen Grund, warum Sie versuchen, die Höhe des Elements in Ihrem HTML zu erhalten, anstatt es auf eine Variable in Ihrem Controller zu setzen? Also '$ scope.row_height = $ ('. Table1 tr: erstes Kind'). Height() + 'px'. Dann setze es einfach in dein Style-Attribut 'style =" height: {{row_height}} "' –

Sie könnten jQuery verwenden, um die Größe der anderen Tabelle abzurufen, aber Sie müssen über den Controller gehen.

Ich habe es die aktualisierte Höhe beim Klicken auf die grüne Box abrufen, aber Sie könnten es auch auf dem Rendern der Tabelle tun.

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MainController', ['$scope', function($scope) { 
 
    $scope.person = { 
 
    firstName: 'Mike', 
 
    lastName: 'Smyth' 
 
    }; 
 
    $scope.myStyle = {}; 
 
    $scope.findStyle = function(selector){ 
 
    $scope.myStyle = {'height': ($(selector).height() + 'px')}; 
 
    } 
 
}]);

.person{ 
 
    background: green; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.bigDiv{ 
 
    background: blue; 
 
    width: 50%; 
 
    float: left; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="MainController"> 
 
     <div class="person" ng-style="myStyle" ng-click="findStyle('.bigDiv')">{{person.firstName}} {{person.lastName }}</div> 
 
     <div class="bigDiv"></div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-04-25 21:12:40 dmoo

Danke @dmoo, das ist ziemlich genau das, was ich gesucht habe :-) – jTrouble

@jTrouble das Ereignis, das Sie wahrscheinlich verwenden sollten, ist ng-repeat-finish. siehe hier - http://stackoverflow.com/questions/13471129/ng-repeat-finish-event – dmoo

Nochmals vielen Dank @dmoo, ich werde den Link in Kürze anschauen. Um die Antwort zu vervollständigen, kam ich nach ein bisschen Herumspielen und Schwierigkeiten, es zum Laufen zu bringen, schließlich auf: 'ng-style =" myController.getHeight ($ index) "' im HTML und die Funktion getHeight mit 'var rowH = $ ('. table1 tbody tr'). eq (Zeile) .height(); return {"Höhe": rowH + "px"}; ' – jTrouble

Der Code, den Sie wird nicht funktionieren, weil die Vorlage nicht vollständig wiedergegeben wird, wenn Sie versuchen Höhe von Reihe zu bekommen und es auf die Höhe der Zeile in anderen Tabelle zugeordnet werden. Sie müssen einen Beobachter in Ihrem Controller hinzufügen, der nach dem Laden der Vorlage und bei der nächsten Iteration die Zeilen der Tabelle 1 durchläuft und deren Höhe den Zeilen der Tabelle 2 zuweist.

Sehen Sie dieses JSFiddle Beispiel, das ich gemacht: http://jsfiddle.net/bpxv80nj/

HTML:

<div ng-controller="MyCtrl"> 
    <div class="col"> 
     <table class="table1"> 
     <tr data-ng-repeat="(i, row) in table1"> 
      <td>{{i + 1}}</td> 
      <td data-ng-bind="row.text"></td> 
     </tr> 
     </table> 
    </div> 
    <div class="col"> 
     <table class="table2"> 
     <tr data-ng-repeat="(i, row) in table2"> 
      <td>{{i + 1}}</td> 
      <td data-ng-bind="row.text"></td> 
     </tr> 
     </table> 
    </div> 
</div>

JS:

var myApp = angular.module('myApp', []); 

function MyCtrl($scope, $timeout) { 

    $scope.$watch('$viewContentLoaded', function() { 
     $timeout(function() { 
      $('.table1 tr').each(function() { 
       $('.table2 tr').height($(this).height()); 
      }); 
     }); 
    }); 

    $scope.table1 = [{ 
     text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis sem ut pharetra sagittis. Nam luctus suscipit augue at suscipit. Maecenas quis justo mauris.' 
    }]; 

    $scope.table2 = [{ 
     text: 'Lorem ipsum dolor sit amet' 
    }]; 
}

Quelle

2016-04-25 21:36:25 nostop

Variable in ng-style basierend auf anderen DOM-Elementen verwenden

Antwort

Verwandte Themen