根据 ng-repeat 中的 $index 拆分 div 背景色

Question

我正在构建一个新的 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 中包含了 class "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%);
}

Answer 1

我按照@kendavidson 提到的内容进行了此操作。添加了一个新的 div 和 position: absolute 并且我没有在控制器中执行它，而是在 html 中添加了带有百分比条件的 ng-style。

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

根据 ng-repeat 中的 $index 拆分 div 背景色

Split a div background color based on $index in ng-repeat

html

css

background

angularjs

angularjs-ng-repeat