NGリピートで特定のインデックスのためにNG-ショーに

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; 
    } 
     }); 
    }; 

私は私のページのロードを呼び出すonload()を持っているし、私は私のようになりますfavourite.png有効にすると$scope.profileDataにitem.favourite == 1、item.favourite == 0の場合にunfavourite.pngが有効になります。私が特定のレコードを混乱させないようにしたいのであれば。私はunfavourite()を使用しており、私は成功としてバックエンドからの応答を得る。私はonload()を再度呼び出すと、再びページ全体を再読み込みするようになります。私はng-show = onLoadFav ,onLoadUnFav, newFav, newUnFavをhtmlに入れて、それに応じてアイコンを有効にします。しかし、問題は、ng-repeatですべてのアイコンが有効または無効になっているからです。特定のもの。 ng-repeatの特定のインデックスのng-showの操作方法

Answer 1

私はコードをテストしなかったので、すぐにそれを行います。しかし、あなたは、ユーザーID

<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> 

によって対処配列を使用することができ、それがコントローラになり

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(); 

    }]);