1

I'm trying to use ng-style to set the z-index and left margin of each item in my list. The list items are presented as cards and when they are stacked they are meant to look like stacked cards.

For z-index

  1. Count Intervention Cards
  2. Give top card a z-index equal to the total number of cards.
  3. The other cards should have a z-index one number lower than the one above it.

For margin-left

  1. Each card should have a margin-left 5px more than the one above it.

Heres' how it all looks:

Stacked (looks like crap) https://i.stack.imgur.com/WRVO4.png

But should looks like this https://i.stack.imgur.com/4MnvR.png

I've tried writing a function to set the z-index but it's not working. I'm probably way off.

Controller

(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}));
    }

  }

})();

View

<!-- This is inside an ng-repeat-->
<div class="card" ng-style="card.zIndex()">
...
</div>
sharpmachine
  • 3,783
  • 6
  • 19
  • 24

1 Answers1

2

I kind of had to make up the div and styles since I didn't see anything but how is this: 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;
}

basically use ng-style to set the position and z-index and position of the box. You can wrap the cards in a div.

Ronnie
  • 11,138
  • 21
  • 78
  • 140
  • Nice! Thanks @ronnie. This works great for the z-index. When it comes to the positioning though it won't work if say I had more than one card stack (2+ goals) like so: http://i.imgur.com/PSQF2lO.png. I didn't explain that I wanted more than 2 stacks though so that's my fault. – sharpmachine Jul 10 '15 at 17:16
  • so the `ng-repeat` goes through multiple stacks? How is your data structured so I can whip something up? – Ronnie Jul 10 '15 at 17:27
  • Yeah so there are domains, and each domain has a set goals and each goal has interventions. For for each domain I've got an `ng-repeat` for goals, and inside that repeat I have another `ng-repeat` for interventions. Goals are the top card and under that is the interventions so when stacked, the interventions are meant to stack under their parent goal. Some domains have just 1 goal, while others have more than 1. Does that help and/or make sense? – sharpmachine Jul 10 '15 at 17:51
  • yeah it makes sense. If you post your data structure (json, array, object etc) I can probably help – Ronnie Jul 10 '15 at 18:03
  • I decided to not use the positioning. I like how it looks without it. So no need to try and whip something up but I really appreciate it Ronnie. Thanks so much. You were a big help. – sharpmachine Jul 10 '15 at 18:29