如何在angularjs中的来自循环的框中添加类似左箭头的工具提示

Question

我有一些链接Click-1，Click-2等，当我点击它时，会显示相应的框。那个盒子已经有绝对位置了。我想在每个框的左侧添加一个小箭头，这应该像工具提示，我已经使用css形状，但它不可能与相同的div，因为我需要创建其他div，并把位置绝对，但它不来correctly.Here是下面的代码。https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in data" >
       <div ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</div>
       &nbsp;&nbsp;&nbsp;ssssssssssss
       <div class="arrow_box name" ng-show="activeItem==x">
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       <h3>{{x.name}}<h3>
       <p>Hello world</p>
       </div>
    </li>
  </ul>  
</div>
  </body>

</html>

CSS

ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
    left: 97px;
    background: #fff;
    border: 1px solid;
    width: 61px;
    height: 202px;
    overflow: auto;
    width: 24%;
}
.arrow_box {
    position: absolute;
    background: #ffffff;
    border: 1px solid #ccc;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 5px;
    margin-top: -5px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 8px;
    margin-top: -8px;
}
.id,name{
float:left;
}

脚本

var data = [{"name":"name1","title":"title1","id":"1"},{"name":"name2","title":"title2","id":"2"},{"name":"name3","title":"title3","id":"3"}];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.data = data;

  $scope.setActiveItem = function(item){
     $scope.activeItem = item;
  }

  // show first on page load
  // $scope.activeItem = data[0];

});// Code goes here

Answer 1

在您的style.css中添加此css代码片段：

.arrow_box {
    position: relative;
    background: #ffffff;
    border: 2px solid #000000;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 5px;
    margin-top: -5px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 8px;
    margin-top: -8px;
}

调用arrow_box类而不是name css类

 <ul>
    <li ng-repeat="x in data" >
       <span ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</span>
       &nbsp;&nbsp;&nbsp;ssssssssssss<span class="arrow_box" ng-show="activeItem==x">{{x.name}}</span>
    </li>
  </ul>  

检查此处plunker code