[AngularJS] On click event, an item in a list should change its style

[luca leone]

Hello everybody,

I'm using AngularJS v1.7.5.  

I have a list of 5 items, 5 html divs, that I created with the `ng-repeat` 
directive. I set a bound between the Model and the View for 
`$scope.avatars[avatar.sex]` and `$scope.placeholder`. Then by using the 
`ng-click` directive I created this behavior: when I click on a list item I 
set the placeholder to the avatar.sex.

I would also like, on click, to change the style of the item I clickked. 
Say, make the text color magenta (from default black). And when I click on 
another item make this last one magenta, while the previous one updates to 
the default black. In other words, the last clickked item should be 
magenta, while the others should be black. Initial state all items text 
color black. 

Here's a link to the code 
https://www.dropbox.com/s/owbt3uktkbpwqnn/style-composer-proto.zip?dl=1 and 
here's the most important parts:

<div ng-controller="AvatarController">
  <div ng-click="setAvatar(avatar.sex)" ng-repeat="avatar in avatars">
{{avatar.sex}}</div>
  <div class="avatar">{{placeholder}}</div>
</div>

In app.js I wrote:

var basicStyleApp = angular.module('basicStyleApp', []);

basicStyleApp.controller('AvatarController', function 
AvatarController($scope) {
$scope.placeholder = 'ceci n\'est pas un avatar ;)';

$scope.setAvatar = function(av) {
  $scope.placeholder = av;
};
  $scope.avatars = [
    {
      sex: 'Man'
    }, {
      sex: 'Woman',
    }, {
      sex: 'Boy',
    }, {
    sex: 'Girl',
    }, {
    sex: 'Baby'
    }
  ];

});

My high level idea of a solution is made of 2 steps. On click:

1. make all items black
2. change the one clickked to magenta

To implement step 1 I can add `$scope.color = 'black'` to the function 
`setAvatar()`, and bind it to `ngClass={{color}}`. But then step 2 is a 
problem for me: I don't know how to target the specific element that was 
cliccked to make it magenta. I am thinking in a traditional way: event 
target, handler. But probably, in the angular context this is wrong.

I checked the API docs for `ngClass` and `ngStyle`, the official tutorial, 
but couldn't come up with a solution so far and didn't see something 
helpful (I also searched for related stackoverflow posts).

Thanks,
Luca


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/7c2c20af-bc4c-4bd1-a74b-baef5e44f3e7%40googlegroups.com.