невозможно показать и скрыть div внутри цикла на основе клика

Question

У меня очень простой код, он работает должным образом, моя проблема в том, что я не могу изменить подобное на непохожее и не похожее на div *

<div class="posts" ng-repeat="s in newsFeeds">
    {{s.message}}

    <div ng-if="s.likeStatus === 1">
           <div class="liked">
             <a ng-click="unlikePost(s.id,s.userid)">liked</a>
          </div>
    </div>
   <div ng-if="s.likeStatus === 0">
       <div class="like">
         <a ng-click="likePost(s.id, s.userid)">like</a>
      </div>
    </div>
  </div>

Мой метод

$scope.likePost = function (id, userid) {

        var data = 'id=' + id + "&userid=" + userid;
         console.log(data);
        $http({
            method: 'POST',
            url: "like",
            data: data,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(rs, status, headers, config) {
             if (rs.data.st === 1) {
                console.log("liked");
                $scope.likeStatus = 0;
            } else if (rs.data.st === 0) {
                console.log("Sdfbb");
            }
        }, function errorCallback(data, status, header, config) {
            alert("Opps unable to connect to server");
        }
        );
    };

Answer 1

, как указано в комментариях, вам нужно иметь LikeStatus для каждого элемента в newsFeed, чтобы правильно отслеживать, чтобы вы могли делать следующее:

<div class="posts" ng-repeat="s in newsFeeds">
    {{s.message}}

    <div ng-if="s.likeStatus === 1">
           <div class="liked">
             <a ng-click="unlikePost(s)">liked</a>
          </div>
    </div>
   <div ng-if="s.likeStatus === 0">
       <div class="like">
         <a ng-click="likePost(s)">like</a>
      </div>
    </div>
  </div>

и ваш контроллер, как:

$scope.likePost = function (item) {

        var data = 'id=' + item.id + "&userid=" + item.userid;

        $http({
            method: 'POST',
            url: "like",
            data: data,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(rs, status, headers, config) {
             if (rs.data.st === 1) {

                item.likeStatus = 1;
            } else if (rs.data.st === 0) {
                console.log("error or something");
            }
        }, function errorCallback(data, status, header, config) {
            alert("Opps unable to connect to server");
        }
        );
    };

То же самое вы должны изменить в отличие от метода, чтобы использовать объект newsFeed.Таким образом, у вас будет отслеживание для каждого элемента и одного твердого объекта вместо нескольких.

Также еще один совет по перемещению служебного вызова с контроллера на угловой сервис для лучшей возможности сопровождения.

Answer 2

Это не сработает, потому что $ scope.likeStatus = 0 в ответе на ваш вызов является общим.Вы можете передать переменную $ index в вашей функции, а затем создать массив с likeStatus следующим образом:

1) Передать параметр $ index

<a ng-click="likePost(s.id, s.userid, $index)">like</a>

2) И в вашей функции

$scope.likePost = function (id, userid,index) {

        var data = 'id=' + id + "&userid=" + userid;
         console.log(data);
        $http({
            method: 'POST',
            url: "like",
            data: data,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(rs, status, headers, config) {
             if (rs.data.st === 1) {
                console.log("liked");
                $scope.likeStatus[index] = 0;
            } else if (rs.data.st === 0) {
                console.log("Sdfbb");
            }
        }, function errorCallback(data, status, header, config) {
            alert("Opps unable to connect to server");
        }
        );
    };

3) Измени свой нг-если

<div ng-if="likeStatus[$index] == 0">