javascript - 在两个 Angular 数组之间切换 z-index

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>

在 Controller 上:

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

CSS 是这样的:

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

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

使用 ng-click，如何根据徽章的数组索引(第二个数组)？

谢谢。

Answer 1

上面的答案是我现在的假设，因为你在这里提供的 plunker 是改进的 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 修改

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