Active class IonicV1

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();
                }