2017-02-23 229 views
0

HTML:如何在NG-顯示在特定索引工作NG-重複

 <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(),我就裝我的頁面中調用,我會讓我的如果item.favourite == 1在我的$scope.profileData中,則啓用favourite.png;如果爲item.favourite == 0,則啓用unfavourite.png。如果我想單獨記錄一個特定的記錄。我正在使用unfavourite(),並且我從後端獲得成功響應。如果我再次撥打onload(),它會像重新加載整個頁面一樣。因此,我在HTML中分別給出了ng-show = onLoadFav ,onLoadUnFav, newFav, newUnFav,以使它相應地啓用圖標。但問題是,因爲它在ng-repeat中,所有圖標變爲啓用或禁用,而不是特定的一個。如何在ng-repeat中處理特定索引的ng-show

+0

http://stackoverflow.com/questions/42270597/ng-model-and-ng-repeat-關係和理解範圍/ 42271122#42271122 請看這裏的ng-repeat的回答和詳細說明 – pranavjindal999

回答

1

我沒有測試代碼,很快就會執行。但你可以使用由用戶標識

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

    }]); 
+0

謝謝,讓我檢查一下這個方法,看看 –

+0

好吧,現在我測試了代碼,似乎工作。我在變量前錯過了兩次$ scope,但我現在已經更新了這個。 –

+0

嗨,我爲所有數據啓用了最喜歡的圖標。 –