Question

代码在这里在我看来，我有

<div class="circle" ng-class="circleIndex ? 'zindex-on' : 'zindex-off'" ng-repeat="security in ySecurityData.securities" ng-style="{'bottom': security.totalHeight + '%'"></div>


<div ng-repeat="security in graphData.securities" class="badge-repeat"><span class="badge clearfix" ng-click="swapZindex($index)"><i class="pull-left"></i> <span class="pull-left">{{ security.name }}</span></span>
</div>

在控制器上：

$scope.swapZindex = function(i) {
   $scope.circleIndex = true;
}

Css就像：

.zindex-on {
    z-index: 9;
}

.zindex-off {
    z-index: 0;
}

使用ng-click，如何根据徽章的数组索引（第二个数组）将z-index仅9作为{{1}}提供给相应的圈子（第一个数组）？

感谢。

Answer 1

上面的回答是我现在的假设，因为你在这里提供了改进的plunker

https://plnkr.co/edit/ZdmYuKSQwFfVeAQWGeLl?p=preview

请在之后讨论

js代码已更改

$scope.swapZindex = function(i) {
if($scope.circleIndex[i]){
   $scope.circleIndex[i] =false
   }else{
      $scope.circleIndex[i] = true;
   }

}

html更改

<div class="circle" ng-class="{'zindex-on': circleIndex[$index]  }"
ng-repeat="security in ySecurityData.securities">{{$index}}</div>

css change

.circle {
 box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.06);
position: static;
background: red;
border-radius: 50%;
height: 50px;
width: 50px;
}

Answer 2

我从你的问题中理解的是，当我们点击第二次ng-repeat时你有两次ng重复，那么第一次ng-repeat的相同索引应该加上类zindex-on

这个示例工作演示我是根据您的问题陈述制作的，如果我理解您的问题错误随意沟通

在你的HTML中

<div class="circle" ng-class="{'zindex-on': circleIndex[$index]  }"" ng-repeat="security in ySecurityData.securities" >{{circleIndex[$index]}}   {{security}}</div>


<div ng-repeat="security in graphData.securities" class="badge-repeat"><span class="badge clearfix" ng-click="swapZindex($index)"><i class="pull-left"></i> <span class="pull-left">{{ security }}</span></span>

在js

$scope.swapZindex = function(i) {
$scope.circleIndex[i] = true;
}

唯一的区别在于您使用的是ng-class和内部函数，而您没有使用索引

这是工作演示http://codepen.io/vkvicky-vasudev/pen/oYrwEQ

不需要类zindex-off，因为一旦类zindex-on不存在，默认情况下z-index将为0

在两个角度阵列之间切换z-index

2 个答案: