Разделить цвет фона div на основе $ index в ng-repeat - PullRequest
Новая
       10

Разделить цвет фона div на основе $ index в ng-repeat

1 голос
/ 03 июля 2019

Я создаю новый пользовательский интерфейс, где выполняю 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>

Я включилкласс «survey-v2-slider-background» во внешнем div, который устанавливает фон контейнера, в котором находятся эти переключатели.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'.

Есть ли способ получить это?

Я хочу, чтобы разделение фона выглядело так: enter image description here

То, что я пробовал:

Я столкнулся с линейным градиентом, который я могу использовать, как показано ниже, но это статический процент.Я хочу, чтобы он был динамическим на основе выбранного индекса.

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

1 Ответ

0 голосов
/ 10 июля 2019

Я сделал это в соответствии с тем, что упоминал @kendavidson.Добавлен новый div с позицией: absolute и вместо того, чтобы делать это в контроллере, я просто добавил стиль ng с процентным условием в html.

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