Question

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

对于z-index

干预卡计数
给顶卡一个z-index等于卡的总数。
其他卡片的z-index应该比其上面的卡片低一个。

对于margin-left

每张卡片的边距应比上面的5倍多。

下面有＆＃39;它看起来如何：

堆叠（看起来像垃圾） 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>

Answer 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以及位置。你可以将卡片包装成div。

使用ng-style为每次迭代设置z-index和margin-left

1 个答案: