Handing ng-repeat and ng-if for dynamic datas from server

Question

I have a social media icons where I enable(turns reds color) like button only if my item.like== 1or it wont be highlighted (will be in white color)when item.userid==0. I am doing this dynamically.so I need to call the function profileData () again when click the like for a particular user. in that case it is like entire page is flickering to load the data which is not looking good.I dont want to call profile data ,instead Need solution so only that particular data alone refresh or turned into like .I tried using ng-show = true and ng-show = false , but that inturn makes all the users icon as true and false.

HTML:

<div class="showIcons" ng-repeat="item in pData">

       <a title="Liked">   
       <img  ng-click="unLikeUser(item.userid);" ng-if="(item.like ==1)" class="styleright" src="assets/images/like.png"></a>
       <a title ="Like"> 
      <img  ng-click="likeUser(item.userid);" ng-if="(item.like ==0)" class="styleright otherlike" src="assets/images/like1.png"></a>
               </div>

JS:

$scope.proifleData = function(){
    $scope.pdata = res.response.data;
};

likeuser()

for unlikeUser(same function with addorremove:0)

    $scope.likeUser= function(like){
          var json = {
              "request": {
                "service": {
                  "servicetype": "9",
                  "functiontype": "9000",
                "session_id": $cookieStore.get('sessionid')

                },
                "data": {
                  "like": [
                    like
                  ],
                  "addorremove": 1
                }
              }
            }
      UserService.getSocialMedia(json).then(function (res) {   


         $scope.profileData();                });
  };  

JSON:

  $scope.pData = [
  [
    {
      "profileInfo": {
        "firstname": "shruthi",
        "lastname": "p",
        "like": 1,

      }
    }
  ],
  [
    {
      "profileInfo": {
        "firstname": "talentnew",
        "lastname": "new",
          "like": 0,

      }
    }
  ],
  [
    {
      "profileInfo": {
        "firstname": "jay",
        "lastname": "sree",
             "like": 0,

      }
    }
  ],
  [
    {
      "profileInfo": {
        "firstname": "ja",
        "lastname": "sr",
        "like": 1,

      }
    }
  ],
  [
    {
      "count": 84
    }
  ]
]

Answer 1

When user press like get the whole item object into your controller.

View

ng-click="likeUser(item)"

Controller

• Get a deep copy of item object (itemCopy)
• Use itemCopy object to increment like count at first place. this will not update the view.
• Use this object instead of item object if you are plan to use item object in server request.
• After that send the like count update request to server then have the success request
• Then increment the like count inside the item object that is passed as a parameter. This will update the particular user like count in view because you are using same object reference

$scope.likeUser = function(item) {
  var itemCopy = angular.copy(itme); // get a deep copy
}

You could do same for the dislike event also. Hope this will help to your.