Question

我在ng-repeat中动态设置z-index时遇到问题。假设我的控制器中有一个这样的对象数组（这是动态的，所以我可以添加，稍后删除）。

$scope.profiles = [{name: 'name', photo: 'path/to/photo.jpg', age: 30, position: ''}, ....];

现在我在我的视图中显示这些数据：

<div data-ng-repeat="profile in profiles track by $index" data-is-last="{{ $last }}">
    <!-- Profilet Card -->
    <div class="profile-card" data-ng-style="{'z-index': (profiles.length - $index)}"></div>
    <!-- Profile's Contact List  -->
    <div class="profile-contact" data-ng-style="{'z-index':  (profiles.length - $index) }"></div>
</div>

现在我需要减少我的转发器中的z-index，但是上面的方法不起作用，因为我需要div class="profile-contact"使z-index低于{{1与div一起使用。目前它们都是相同的价值。

我尝试在Controller中设置一个变量并将其返回到视图中，如下所示：

在Javascript控制器

中

class="profile-card"

这是HTML视图

$scope.zCount = 50;

$scope.setZindex = function () {
  $scope.zCount = $scope.zCount - 1;
  var returnThis = $scope.zCount;
  return returnThis;
};

然而，这造成了大量<div data-ng-repeat="profile in profiles track by $index" data-is-last="{{ $last }}">  <div class="profile-card" data-ng-style="{'z-index': setZindex()}"></div>  <div class="profile-contact" data-ng-style="{'z-index': setZindex() }"></div> </div>错误。我应该如何动态设置Z-index的值，以便第二个div始终低于它之前的兄弟？

非常感谢提前。

Answer 1

你的第二种方法无法工作，因为角度摘要循环将在你的页面上多次运行，每一轮你的z索引会变小。

你可以简单地调整你原来的方法：

<div data-ng-repeat="profile in profiles track by $index" data-is-last="{{ $last }}">
    <!-- Profilet Card -->
    <div class="profile-card" data-ng-style="{'z-index': ((profiles.length - $index)*2)}"></div>
    <!-- Profile's Contact List  -->
    <div class="profile-contact" data-ng-style="{'z-index':  ((profiles.length - $index)*2 - 1) }"></div>
</div>

现在每个profile-card获得的z-index是之前的两倍，而相应的profile-contact获得z-index之间的profile-cards。

Answer 2

试试这个
HTML

data-ng-style="setZindex($index)"

JS

$scope.setZindex = function () {
  $scope.zCount = $scope.zCount - index;
  return {'z-index':$scope.zCount}
};

在ng-repeat中动态降低div z-index

2 个答案: