在ng-repeat中动态降低div z-index [英] decrease div z-index within ng-repeat dynamially

问题描述

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

I have a problem with dynamically setting the z-index within an ng-repeat. Say I have an object array like so in my controller (this is dynamic, so I can add, and remove later).

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

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

Now I present this data within my view like so:

<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低于 div ， class =profile-card。目前它们都是相同的值。

Now I need to decrease the z-index within my repeater, however the above won't work as I need the div with class="profile-contact" to have a z-index lower than the div with class="profile-card". Currently they are both the same value.

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

I tried setting a variable in my Controller and returning it to the view like so:

在Javascript控制器中

In the Javascript Controller

$scope.zCount = 50;

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

这是HTML视图

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

然而，这会产生大量的 $ digest 错误。我应该如何动态设置Z-index的值，以便第二个div总是低于它之前的兄弟？

However this created massive $digest errors. How should I dynamically set the value of the Z-index so the second div is always lower than the sibling before it?

非常感谢提前。

推荐答案

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

Your second approach can't work, as the angular digest loop will run multiple times on your page and with each round your z-indexes will get smaller.

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

You could simply adapt your original approach like this:

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

现在每个个人资料卡获得 z-index 两倍高，而相应的 profile-contact 获得 z-index 介于个人资料卡之间。

Now each profile-card gets a z-index twice as high as before while the corresponding profile-contact gets an z-index which is between the profile-cards.

这篇关于在ng-repeat中动态降低div z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！