如果我正确理解了你的问题（如果没有，请告诉我）；我认为解决这个问题的一种方法是这样的：
假设您的产品的尺寸（宽度）恒定 - 设置为 50px 或其他 - ；您可以将粉红色元素的位置设置为绝对；然后对粉红色元素使用 ng-repeat，并在 html 中添加一个简短的 ng-style 属性，如下所示：
<div ng-repeat="item in products" ng-style="{'left': $index*50 + 'px'}" ng-click="add-to-purchased($index)"></div>
关于购买的产品：不要在“购买”数组上使用 ng-repeat，而是在“add-to-purchased”函数内，将产品推送到“购买”数组后，您可以简单地将产品动画到“顶部” : '到边框元素的高度距离'" 和 "left" 等于 {$scope.purchased.length*50 + 'px'}。然后使用 ng-class （带有切换开关）添加一个类来进行着色和其他 css 内容...（您也可以考虑颜色变化的过渡。正如您可能知道的那样）
我还认为您可以使用 ng 类处理不同的高度和顶部问题（以防产品数量超过一行的容量），该类根据以下内容添加具有新“顶部”值的类： ($index > some- number），以及上部元素的另一个 ng-class（位于有边框元素顶部的元素），改变它的高度......
我希望这可以帮到你
Update:
不幸的是我没有很好地理解这个问题。但现在看看这个问题，我认为有一种方法可以更动态地做到这一点。
在 - 的里面$scope.purchase函数，你可以用以下方式发送你的指令$broadcast并像这样传递单击的元素（对于库存中的任何元素，无论是否使用 ng-repeat 创建）：
<div class="stock" ng-click="purchase($event)"></div>
and:
$scope.purchase = function(event) {
$scope.purchased.push($scope.products.pop());
$scope.$broadcast('purchaseHappened', event.target);
};
并在您的指令中放置事件侦听器：
scope.$on('purchaseHappened', function(event, target) {
//catch target in here, and then use it's position to animate the new elements...
})
我想你也可以使用target.getBoundingClientRect()获取元素相对于视口的位置（.top , .left,...) 而不是 jquery-ui 的.position如果你想...
是否更接近解决方案？
