Wie auf ng-Show für bestimmten Index in Arbeit ng-repeat

Question

HTML:

 <div class="displayImgData col-sm-3" ng-repeat="item in profileData" > 

      <a ng-show="onLoadFav" title="Make as Favourite"> 
      <img class="styleright" src="assets/images/unfavourite.png" ng-if="(item.favourite ==0)" ng-click="favouriteUser(item.userid);"> 
    </a> 

     <a ng-show="onLoadUnFav" title="Favourite"> 
    <img class="styleright" src="assets/images/favourite.png" ng-if="(item.favourite ==1)" ng-click="unfavouriteUser(item.userid);" >` 
    </a>` 

     <a ng-show="newFav" title="Make as Favourite"> 
    <img class="styleright" src="assets/images/unfavourite.png" ng-click="favouriteUser(item.userid);"> 
    </a> 

     <a ng-show="newUnFav" title="Favourite"> 
    <img class="styleright" src="assets/images/favourite.png" ng-click="unfavouriteUser(item.userid);" > 
    </a> 
</div> 

JS:

$scope.onLoad = function(){ 
    $scope.profileData = [{'favourite':0,'userid':1},{'favourite':0,'userid':2},{'favourite':1,'userid':3}] 
}; 
$scope.onLoadFav = false; 
$scope.onLoadUnFav = false; 
$scope.newFav = false; 
$scope.newUnFav = true; 
$scope.unfavouriteUser= function(){ 
UserService.getSocialMedia(json).then(function (res) { 
    if(res.statuscode == 0){ 
    $scope.onLoadFav = false; 
    $scope.onLoadUnFav = false; 
    $scope.newFav = false; 
    $scope.newUnFav = true; 
    } 
     }); 
    }; 

I onload(), die ich auf das Laden meiner Seite rufen, will ich meine machen favourite.png aktiviert, wenn item.favourite == 1 in meinem $scope.profileData und ungvourite.png aktiviert ist, wenn item.favourite == 0. Wenn ich eine bestimmte Aufzeichnung allein ungünstig machen möchte. Ich verwende unfavourite() und ich bekomme Antwort vom Backend als Erfolg. Wenn ich wieder onload() rufe, wird es sein, als ob ich die ganze Seite neu laden würde. Also gebe ich ng-show = onLoadFav ,onLoadUnFav, newFav, newUnFav in HTML ein, um es entsprechend zu aktivieren. Aber das Problem ist, da es in ng-repeat das ganze Icon aktiviert oder deaktiviert wird, nicht das Besondere. Wie man an ng-show für bestimmte Index in ng-wiederholen

Answer 1

Ich habe den Code nicht getestet, wird es bald tun. aber man konnte eine Reihe von User-ID angesprochen verwenden

<div class="container" ng-app="confusionApp"> 
    <div class="displayImgData col-sm-3" ng-controller="testCtrl" ng-repeat="item in profileData" > 

    <a ng-show="loadData[item.userid].onLoadFav" title="Make as Favourite"> 
     <img class="styleright" src="assets/images/unfavourite.png" ng-if="(item.favourite ==0)" ng-click="favouriteUser(item.userid);"> 
    </a> 

    <a ng-show="loadData[item.userid].onLoadUnFav" title="Favourite"> 
     <img class="styleright" src="assets/images/favourite.png" ng-if="(item.favourite ==1)" ng-click="unfavouriteUser(item.userid);" >` 
    </a>` 

    <a ng-show="loadData[item.userid].newFav" title="Make as Favourite"> 
     <img class="styleright" src="assets/images/unfavourite.png" ng-click="favouriteUser(item.userid);"> 
    </a> 

    <a ng-show="loadData[item.userid].newUnFav" title="Favourite"> 
     <img class="styleright" src="assets/images/favourite.png" ng-click="unfavouriteUser(item.userid);" > 
    </a> 
    </div> 
</div> 

Und das wäre der Controller

angular.module('testApp',[]) 

    .controller('testCtrl',['$scope', function($scope) { 

     $scope.loadData = []; 

     $scope.onLoad = function(){ 
     $scope.profileData = [{'favourite':0,'userid':1},{'favourite':0,'userid':2},{'favourite':1,'userid':3}]; 

     for (var i=0; i < $scope.profileData.length; i ++) { 
      $scope.loadData[$scope.profileData[i].userid] = {onLoadFav : false, onLoadUnFav : false, newFav: false, newUnFav : true}; 
     } 

     }; 




     $scope.unfavouriteUser= function(pUserID){ 



     UserService.getSocialMedia(json).then(function (res) { 
      if(res.statuscode == 0){ 
      $scope.loadData[pUserID].onLoadFav = false; 
      $scope.loadData[pUserID].onLoadUnFav = false; 
      $scope.loadData[pUserID].newFav = false; 
      $scope.loadData[pUserID].newUnFav = true; 
      } 
     }); 
     }; 

     $scope.onLoad(); 

    }]);