每次迭代使用ng-style设置z-index和margin-left [英] Set z-index and margin-left with each iteration using ng-style
问题描述
我尝试使用ng样式设置z-index并在列表中留下每个项目的边距。列表项目以卡片形式呈现，当它们堆叠时，它们看起来像堆叠卡片。
对于z-index
- 计数干预卡
- 给顶牌一个等于总卡数的z-索引。
- 其他卡应该有一个低于上面那个的z-index一个数字。
对于余量
- 每张卡片的边距应该比上边的多5px。
Heres'看起来如何：
堆叠（看起来像垃圾）
http://i.imgur.com/Vy9knsI.png
但应该看起来像这样
http：/ / /imgur.com/YXngp3A,eCjoKwd,Vy9knsI#0
我试过编写一个函数来设置z-index，但它不起作用。
$ b
控制器
<$ c'c>（function（）{
'use strict';
angular
.module（'casemanagerApp'）
.controller（'CasePlanGoalsCtrl'，CasePlanGoalsCtrl ）;
函数CasePlanGoalsCtrl（lodash，Restangular，getDomainsResolve，getGoalsResolve，getInterventionsResolve）{
var vm = this;
var _ = lodash;
//注入
vm.domains = getDomainsResolve;
vm.allGoals = getGoalsResolve;
vm.allInterventions = getInterventionsResolve;
//函数
vm。 domainInterventionCount = domainInterventionCount;
angular.forEach（vm.domainInterventionCount，function（value，key，card）{
var i = 1;
card.zIndex = {'z- index'：i ++};
}）;
函数domainInterventionCount（goalId）{
return _.size（_。filter（vm.allInterventions，{'goalId'：goalId }））;
}
}
}）（）;
查看
<！ - 这是在ng-repeat中 - >
< div class =cardng-style =card.zIndex（）>
...
< / div>
我需要编辑div和样式因为我什么都看不到，但这是怎么回事： http://codepen.io/anon/pen/oXdqda
HTML：
< body ng-应用= MyApp的 >
< div ng-controller =MyController>
< div ng-repeat =card in cardsclass =cardng-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;
背景：#fff;
位置：绝对;
top：0;
padding：0;
保证金：0;
font-size：18px;
}
.blue-border {
width：5px;
背景：蓝色;
基本上使用 ng-style 设置位置和 z-index 和框的位置。你可以将这些卡包装在一个div中。
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
- Count Intervention Cards
- Give top card a z-index equal to the total number of cards.
- The other cards should have a z-index one number lower than the one above it.
For margin-left
- Each card should have a margin-left 5px more than the one above it.
Heres' how it all looks:
Stacked (looks like crap) http://i.imgur.com/Vy9knsI.png
But should looks like this http://imgur.com/YXngp3A,eCjoKwd,Vy9knsI#0
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>
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"> </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.
这篇关于每次迭代使用ng-style设置z-index和margin-left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
