在ng-重复中基于$index分割div背景色

Question

我正在构建一个新的UI，其中我正在做ng-重复数组和显示元素作为单选按钮-内联。

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中包括了“调查-v2-滑块-背景”类，它设置了保存这些单选按钮的容器的背景。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文件中提到的默认背景颜色，用于“调查-v2-滑块-背景”。

有办法弄到这个吗？

我想把背景分割成这样：

​

我尝试了什么：

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

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

Answer 1

我这样做是在@kendavidson提到的。添加了一个带有位置的新div :绝对值，而不是在控制器中执行，我只是在html中添加了带有百分比条件的ng样式。

<div class="sliderticks-background survey-v2-slider-selected-background" ng-style = "{ width: ($ctrl.selectedOptionOrderIndex/($ctrl.question.choices.length-1)) * 100 + '%' }"></div>