AngularJS: How to change the styles of one element from a list of the same?

Question

css

Hello. Recently I started to study AngularJS, I ran into such a problem: there is a container, it contains a list of elements (their number is not constant). You need to change the background of an element dynamically. The choice of color takes place in the menu that appears when you press , by clicking on the label associated with . Can you please tell me how to change the styles of only one element in a group of the same elements? So far I was able to change the color of all elements using 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>

Answer 1

Try replacing vm.thisTask with item.thisTask everywhere