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

[Sander Elias]

Hi Luca,

Look up `ngClass`

Regards

Sander

[luca leone]

Thanks Elias,

I did, but could not figure out a solution. Since you pointed me in that direction I'll check it out again.

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/UioqBsxwsXw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/c660ccc9-e536-4334-9510-148bf56d121e%40googlegroups.com.