使用 ng-style 在每次迭代中设置 z-index 和 margin-left答案

【问题标题】：Set z-index and margin-left with each iteration using ng-style使用 ng-style 在每次迭代中设置 z-index 和 margin-left
【发布时间】：2015-09-29 11:30:33
【问题描述】：

我正在尝试使用 ng-style 设置列表中每个项目的 z-index 和左边距。列表项显示为卡片，当它们堆叠时，它们看起来像堆叠的卡片。

对于 z-index

计算干预卡
为顶部卡片指定与卡片总数相等的 z-index。
其他卡片的 z-index 数字应该比它上面的数字低一个。

对于左边距

每张卡片的左边距应比其上方的卡片多 5 像素。

这一切看起来如何：

堆叠（看起来像垃圾） http://i.imgur.com/Vy9knsI.png

但应该是这样的 http://imgur.com/YXngp3A,eCjoKwd,Vy9knsI#0

我尝试编写一个函数来设置 z-index，但它不起作用。我可能已经走了。

控制器

(function() {
  'use strict';

  angular
  .module('casemanagerApp')
  .controller('CasePlanGoalsCtrl', CasePlanGoalsCtrl);

  function CasePlanGoalsCtrl(lodash, Restangular, getDomainsResolve, getGoalsResolve, getInterventionsResolve) {
    var vm = this;
    var _ = lodash;

    // Injections
    vm.domains = getDomainsResolve;
    vm.allGoals = getGoalsResolve;
    vm.allInterventions = getInterventionsResolve;

    // Functions
    vm.domainInterventionCount = domainInterventionCount;

    angular.forEach(vm.domainInterventionCount, function (value, key, card) {
      var i = 1;
      card.zIndex = {'z-index' : i++};
    });

    function domainInterventionCount(goalId) {
      return _.size(_.filter(vm.allInterventions, {'goalId': goalId}));
    }

  }

})();

查看

<!-- This is inside an ng-repeat-->
<div class="card" ng-style="card.zIndex()">
...
</div>

【问题讨论】：

标签： html css angularjs

【解决方案1】：

我不得不弥补 div 和样式，因为我什么也没看到，但这是怎么回事：http://codepen.io/anon/pen/oXdqda

HTML：

<body ng-app="MyApp">
    <div ng-controller="MyController">
      <div ng-repeat="card in cards" class="card" ng-style="getStyle($index);">
        <span class="blue-border">&nbsp;</span>
        {{card.title}} 
      </div>
    </div>
</body>

JS：

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

app.controller('MyController', function($scope)
{
  $scope.cards = [
    {title:'Test 1'},
    {title:'Test 2'},
    {title:'Test 3'},
    {title:'Test 4'},
    {title:'Test 5'}
  ];

  $scope.getStyle = function(index)
  {
    return {
      'z-index': -index,
      'top': 5 * index + 'px',
      'left': 5 * index + 'px'
    }
  };
});

CSS：

.card {
  width:100px;
  height:20px;
  border:1px solid #000;
  background:#fff;
  position:absolute;
  top:0;
  padding:0;
  margin:0;
  font-size:18px;
}

.blue-border {
  width:5px;
  background:blue;
}

基本上用ng-style设置位置，z-index和box的位置。您可以将卡片包装在 div 中。

【讨论】：

不错！谢谢@ronnie。这对 z-index 非常有用。当谈到定位时，如果说我有不止一个牌堆（2+ 个目标），就像这样：i.imgur.com/PSQF2lO.png。我没有解释说我想要超过 2 个堆栈，所以这是我的错。
所以ng-repeat 经历了多个堆栈？您的数据是如何结构化的，以便我可以整理一些东西？
是的，所以有领域，每个领域都有设定的目标，每个目标都有干预措施。对于每个域，我都有一个用于目标的ng-repeat，在该重复中，我还有另一个ng-repeat 用于干预。目标是最上面的卡片，下面是干预措施，因此当堆叠时，干预措施旨在堆叠在其父目标之下。有些域只有 1 个目标，而其他域则不止 1 个。这有帮助和/或有意义吗？
是的，这是有道理的。如果您发布您的数据结构（json、数组、对象等），我可能会提供帮助
我决定不使用定位。我喜欢没有它的样子。所以没必要试着做点什么，但我真的很感激罗尼。非常感谢。你帮了大忙。