Active class IonicV1 - angularjs

Question

Hi I have user list in chat application page developed in Ionic v1.
<div class="user-names">
<div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">
<div class="ufor-pname">
<button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')">
<img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">
</button>
<span class="user1-name"> {{person.name}} </span>
</div>
</div>
</div>
I want to add active class while user will click any of the user in list given over there.
//Controller
$scope.getChat = function (userIdFrom,messageFromName,LoggedInUserId) {
$rootScope.userIdFrom = userIdFrom;
$ionicLoading.show();
}
Any help will be appreciated.
Thanks advance.

Answer 1

Add data-ng-style="getStyle(person.id)" in Your HTML like below
<div class="user-names">
<div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">
<div class="ufor-pname" data-ng-style="getStyle(person.id)">
<button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')">
<img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">
</button>
<span class="user1-name"> {{person.name}} </span>
</div>
</div>
</div>
Add one function for getStyle(); in your JS Code for return background color for selected person id.
//Function for set bakground color .
$scope.getStyle = function(person) {
$scope.Style = '';
if ($rootScope.userIdFrom == person) {
$scope.Style = '#F8F7D9';
}
return {'background-color': $scope.Style};
}
$scope.getChat = function (userIdFrom, messageFromName, LoggedInUserId) {
$rootScope.userIdFrom = userIdFrom;
$ionicLoading.show();
}