How to use ng-class conditional in Angularjs?

Question

I have a mobile app where a list contains the users that can be followed. This system is working.

However, in case after the indication of follow a user is realized logout and login again, the button erroneously indicates follow (when you should rather show off not follow). How can I do that?

Controller

.controller('SeguirUser', function($scope, $http, sessionService) {
    var hasLiked = false;
    $scope.seguir= function (id){

        if (!hasLiked) {
            hasLiked = true;
            $scope.seguir_user = 'Não Seguir';
            $scope.seguir_user_class = "seguir_user_click";

            $http.get("https://www.sabeonde.pt/api/api_seguir_user.php?follower="+sessionService.get('user_id')+"&followed="+id).success(function (data) {
                $scope.seguir_user = data;
            });

        } else {
            hasLiked = false;
            $scope.seguir_user = 'Seguir';
            $scope.seguir_user_class = "seguir_user_class";

            $http.get("https://www.sabeonde.pt/api/api_remover_seguir_user.php?follower="+sessionService.get('user_id')+"&followed="+id).success(function (data) {
                $scope.nao_seguir_user = data;
            });
        }     
    }
})

View

<div ng-controller="ListaSeguidoresUser">
         <div class="row" ng-repeat="seguidores in seguidores_user">
            <div class="col">
                <div class="list">
                    <a style="border-top-right-radius: 10px; border-top-left-radius:10px;  border:none;" class="item item-thumbnail-left" href="#">
                         <img style="border-radius: 10px;" src="{{seguidores.user_foto}}">
                         <span style="font-weight:700; font-size:14px; color: black;">{{seguidores.nome}}</span>
                         <p>Seguidores {{seguidores.seguidores}}</p>
                         <p>Opiniões {{seguidores.opinioes}}</p>
                    </a> 
                    <div style="background-color: white; border-bottom-right-radius: 10px; margin:0px -1px 0px -1px; border-bottom-left-radius:10px;  height: 45px;"> 
                        <div style="padding:5px 10px 0px 10px;">
                            <div ng-controller="SeguirUser" ng-init="seguir_user='Seguir'" ng-click="seguir({{seguidores.id}})" class="seguir_user" ng-class="seguir_user_class" style="margin:0px 0px 0px 0px;"><i class="fa fa-user-plus"></i> {{seguir_user}}</div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>  
    </div>    

Answer 1

var hasLiked always is returns to its original value (false).

On startup of the control you need to get the stored value of hasLiked for that user and re-popule hasLiked with the correct value. Something like this (adapt to your actual implementation):

.controller('SeguirUser', function($scope, $http, sessionService) {
    $scope.hasLiked = false;


    // Obtém estado atual (seguindo/não seguindo)
    $http.get("https://www.sabeonde.pt/api/api_seguindo_user.php?follower="+sessionService.get('user_id')+"&followed="+id).success(function (data) {
         $scope.hasLiked = data;
    });

    $scope.seguir= function (id){

        if (!$scope.hasLiked) {
            $scope.hasLiked = true;
            $scope.seguir_user = 'Não Seguir';
            $scope.seguir_user_class = "seguir_user_click";

            $http.get("https://www.sabeonde.pt/api/api_seguir_user.php?follower="+sessionService.get('user_id')+"&followed="+id).success(function (data) {
                $scope.seguir_user = data;
            });

        } else {
            $scope.hasLiked = false;
            $scope.seguir_user = 'Seguir';
            $scope.seguir_user_class = "seguir_user_class";

            $http.get("https://www.sabeonde.pt/api/api_remover_seguir_user.php?follower="+sessionService.get('user_id')+"&followed="+id).success(function (data) {
                $scope.nao_seguir_user = data;
            });
        }     
    }
})

Answer 2

<div ng-controller="SeguirUser" ng-init="seguir_user='Seguir'" ng-click="seguir({{seguidores.id}})" ng-class="{'seguir_user': seguindo == 'false', seguir_user_class: seguindo== 'true'}" style="margin:0px 0px 0px 0px;">
  <i class="fa fa-user-plus"></i>
  {{seguir_user}}
</div>

Something like this should already work.

Answer 3

Example:

I made a decision here ng-class="$index%2==0?'css2':'css1'":

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

  $scope.list = [
    {'Id': 1,'Name': 'Nome 1'}, 
    {'Id': 2,'Name': 'Nome 2'}
  ];
  
  
});

.css1 {
  background-color: red;
  }

.css2 {
  background-color: blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <p ng-repeat="x in list" ng-class="$index%2==0?'css2':'css1'">
    {{x.Id}} {{x.Name}}
  </p>
</div>