温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - Split a div background color based on $index in ng-repeat
angularjs background css html angularjs-ng-repeat

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

发布于 2020-03-27 11:54:24

我正在构建一个新的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%);
}

查看更多

查看更多

提问者
Kiran Pabbu
被浏览
111
Kiran Pabbu 2019-07-10 23:14

我按照@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>