html - 根据ng-repeat中的$ index分割div背景颜色

我正在构建一个新的UI，在其中对数组执行ng-repeat并将数组中的元素显示为单选按钮-内联。

HTML：

<div class="sliderticks-container survey-v2-slider-background" role="radiogroup">
  <div class="sliderticks focus-presenter" ng-repeat="answer in $ctrl.question.choices | orderBy: answer.orderIndex track by $index">
  </div>
</div>

我在外部div中包括了“ survey-v2-slider-background”类，该类设置了容纳这些单选按钮的容器的背景。CSS：

.survey-v2-slider-background {
    background: rgba(202, 236, 244, 0.5)
}

.sliderticks-container {
            display: flex;
            position: relative;
            justify-content: space-between;
            padding: 0 17px;
            border-radius: 14px;
            cursor: pointer;
            .sliderticks {
                display: inline;

我的要求是根据用户单击的单选按钮从左到右拆分背景颜色。假设如果数组有7个元素，并且用户单击索引为4的元素，则容器的背景色应在索引4的左边不同（例如红色）。在索引4的右边，它应为默认背景css文件中提到的“ survey-v2-slider-background”颜色。

有什么办法可以做到这一点？

我希望背景分割看起来像这样：

我试过的

我遇到了线性渐变，可以像下面那样使用，但这是静态百分比。我希望它基于选定的索引是动态的。

.survey-v2-slider-background {
    background: linear-gradient(to right, red 50%, rgba(202, 236, 244, 0.5) 0%);
}

查看更多