Search code examples
angularjsionic-v1

Active class IonicV1


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>

enter image description here

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.


Solution

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