Problem with buttons when clicked on Angularjs

Asked

Viewed 105 times

2

I have a mobile app with the following problem: I have a list of users who each have a "follow" button, which when clicked will have to change to not follow.

Return of PHP true or false to know whether the user currently logged in is already following or not the user. What happens is that when I click it inserts the follower well, but when I refresh the page I go to by "don’t follow", but it re-enters the follower instead of removing it. I don’t know what the problem is.

Controller

.controller('ListaSeguidoresUser', function($scope, $http, sessionService) {
    $http.get("https://www.sabeonde.pt/api/api_seguidores_user.php?user_slug="+sessionService.get('user_slug')+"&user_id="+sessionService.get('user_id')).success(function (data) {
        angular.forEach(data, function(c) {
            $scope.seguidores_user = data;
            var hasLiked = c.hasLiked;
            $scope.seguir= function (id){
                if (!hasLiked) {
                    hasLiked = false;
                    c.seguir_user = "Não Seguir";
                    c.botao_seguir = "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 = true;
                    c.seguir_user = "Seguir";
                    c.botao_seguir = "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-init="seguir_user=seguidores.seguir_user" ng-click="seguir({{seguidores.id}})" class="seguir_user" ng-class="botao_seguir=seguidores.botao_seguir" style="margin:0px 0px 0px 0px;"><i class="fa fa-user-plus"></i> {{seguir_user}}</div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>  
    </div>
php angularjs
  • 1

    Caesar, your question is very confusing. Please edit your question and explain yourself better.

  • I return from php true or false to know if the user who is currently logged in is following or not the user so when I click follow when I update the page I go to do not follow and he inves to remove it back to insert again should be the if that is wrong

  • See your controller, you have all your code inside the foreach. With each cycle you set your "hasLiked" variable again, which will stick to the value of the last item of the "data" array, which should be why it doesn’t work.

  • I took it off but now when I click it does nothing

  • What returns api_segui_user.php ? A "user object"?

  • does not return anything and an Insert only

Show 1 more comment

1 answer

0


See if it works:

Controller:

.controller('ListaSeguidoresUser', function($scope, $http, sessionService) {
    $http.get("https://www.sabeonde.pt/api/api_seguidores_user.php?user_slug="+sessionService.get('user_slug')+"&user_id="+sessionService.get('user_id')).success(function (data) {

        $scope.seguidores_user = data;

        $scope.seguir = function (index){
            var id = $scope.seguidores_user[index]['id'];

            if ($scope.seguidores_user[index]['hasLiked']) {

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

            } else {

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

            }     
        }    
    });
})

View:

<div ng-controller="ListaSeguidoresUser">
 <div class="row" ng-repeat="seguidor 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="{{seguidor.user_foto}}">
                 <span style="font-weight:700; font-size:14px; color: black;">{{seguidor.nome}}</span>
                 <p>Seguidores {{seguidor.seguidores}}</p>
                 <p>Opiniões {{seguidor.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-click="seguir($index)" class="seguir_user" ng-class="{'seguir_user_click':seguidor.hasLiked, 'seguir_user_class':!seguidor.hasLiked}" style="margin:0px 0px 0px 0px;">
                        <i class="fa fa-user-plus"></i>
                        <span ng-if="seguidor.hasLiked">Não Seguir</span>
                        <span ng-if="!seguidor.hasLiked">Seguir</span>
                    </div>                    
                </div>
            </div>
        </div>  
    </div>
</div>

  • appears all in red without the text in the button and clicking does nothing

  • in relation to the text on the button, it was missing the correct </span>, corrected the code, was "</spa>", missing the "n" at the end. See if the text now appears.

  • Now it appears I noticed it later but the button when clicking does not happen anything and they all have the red class that is not following

  • what returns "api_seguidores_user.php"? Inside the answer (the "data" array) there is the property "hasLiked"?

  • yes there I’ll put in question how this php

  • makes inspect element in google Chrome, click "console" and see if any error occurs when clicking one of the buttons.

  • of this Error: id is not defined

  • sorry, forgot to update the "id", changed the controller, added the "id" variable. See if it works.

  • Let’s go continue this discussion in chat.

  • It works well only the classes and that are the opposite

  • Just change the "ng-if" in the view, I updated the HTML, see if it looks good now.

  • yes I’ve changed and it works right and even this

  • Great, glad to help you!

  • Thank you very much and very much indeed

  • Try to understand what has been done, so in the future it will be easier to implement new solutions. :)

  • and that’s what I’m gonna do :)

Show 11 more comments

Browser other questions tagged php angularjs

You are not signed in. Login or sign up in order to post.