基于其他 DOM 元素在 ng-style 中使用变量

Question

我有两个 tables（.table1 和 .table2），它们在页面上的不同 DIV 中并排放置，无论内容如何，我都想要第二个table 行以匹配前 table 行的高度，以便它们完美对齐。第一个 table 是使用基于数据库值的 ng-repeat 构建的，因此高度可以变化 - 无论哪种方式，第二个 table 中的等效行应该始终匹配。

我一直在尝试许多不同的想法，但我认为在 table2 行的 ng 样式中使用 jQuery 选择器可能有效（见下文）但它不起作用;

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

或

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

显然不起作用，但如果我用特定值替换 jQuery 选择器，它会按预期设置行样式；

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

我对使用 jQuery 并不介意，但我正在其他地方使用它，所以没有问题，但基本上我只想对齐每个 table 中行的高度第一个 table (.table1) 的行高。所以问题是，如何获取 table1 中一行的高度值，并使用 angular?[=14= 将其用作 table2 中同一行的高度]

Answer 1

您可以使用 jQuery 获取另一个 table 的大小，但您需要通过控制器。

我让它在单击绿色框时获取更新后的高度，但您同样可以在 table 的渲染器上执行此操作。

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>

Answer 2

您拥有的代码将无法工作，因为当您尝试获取行高并将其分配给其他 table 中的行高时，模板未完全呈现。您需要在控制器中添加一些观察器，它将跟踪模板何时加载并在下一次迭代循环中遍历 table 1 行并将它们的高度分配给 table 2 行。

查看我制作的这个 JSFiddle 示例：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'
    }];
}

基于其他 DOM 元素在 ng-style 中使用变量

Use variable in ng-style based on other DOM element

javascript

css

jquery

angularjs

ng-style