根据ng-repeat

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中包括了“ 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，其位置为：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>