AngularJS: Как измененить стили одного элемента из списка одинаковых?

Question

[Евгений Герасимов]

Здравствуйте. Недавно начал изучать AngularJS, столкнулся с такой проблемой: есть контейнер, в нем список элементов (их кол-во не постоянное). Нужно менять фон элемента динамически. Выбор цвета происходит в меню, которое появляется при нажатии , кликом на label привязанный к . Подскажите пожалуйста как поменять стили только одного элемента в группе таких же элементов? Пока что смог сделать смену цвета всех элементов при помощи ng-style.

<div class="items">
  <div class="item" ng-repeat="item in items" ng-style="vm.thisTask">
    <div class="task-description">Содержимое</div>
    <div class="menu">
      <button class="btn-menu">Меню</button>
      <div class="task-menu">
        <input type="radio" id="1" name="task-color" ng-click="vm.thisTask = {'background-color': 'rgba(255, 100, 100, 0.16)'}">
        <label for="1"></label>
        <input type="radio" id="2" name="task-color" ng-click="vm.thisTask = {'background-color': '#F44336'}">
        <label for="2"></label>
        <input type="radio" id="3" name="task-color" ng-click="vm.thisTask = {'background-color': '#FF9100'}">
        <label for="3"></label>
        <input type="radio" id="4" name="task-color" ng-click="vm.thisTask = {'background-color': '#FFEB3B'}">
        <label for="4"></label>
        <input type="radio" id="5" name="task-color" ng-click="vm.thisTask = {'background-color': '#78CB5B'}">
        <label for="5"></label>
        <input type="radio" id="6" name="task-color" ng-click="vm.thisTask = {'background-color': '#80A6CD'}">
        <label for="6"></label>
      </div>
    </div>
  </div>
</div>

Comments

[emp1re]

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

Answer 1

[Александр Манаков]

Попробуйте заменить везде vm.thisTask на item.thisTask