Evgeny Gerasimov2017-04-13 22:49:11
Evgeny Gerasimov, 2017-04-13 22:49:11

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

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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Alexander Manakov, 2017-04-14

Try replacing vm.thisTask with item.thisTask everywhere

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question