CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatng-show
KasparTr
KasparTr

Reputation: 2458

Multiple ng-show handling with ng-repeat

I have a list of items using ng-repeat. Each item has two buttons "Follow" and "Unfollow". I need to show either of the two at once depending on which items are already followed (array list contains followed items).

In my html:

<ion-list>
  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="popShow in popShows" type="item-text-wrap" href="#/tab/popular/{{popShow.id}}" back-img={{popShow.backdrop_path}}>
    <h2>{{popShow.name}}</h2>
    <p>{{popShow.overview}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" ng-click="follow(popShow)" id="followB" ng-show="showFollowButton">
      Follow
    </ion-option-button>
    <ion-option-button class="button-assertive" ng-click="unFollow(popShow)" id="unFollowB" ng-show="showUnFollowButton">
      Following
    </ion-option-button>
  </ion-item>
</ion-list>

In my controller I need to change the value of the specific items buttons ng-show. I am trying to do that like this

controller.js:

.controller('PopularShowsCtrl', function($scope, PopularShows){
  var followArray = PopularShows.getFollowArray();

  PopularShows.all().success(function(data){
     $scope.popShows = data.results;

     for (var i = 0; i < $scope.popShows.length; i++) {
     var currentItem = $scope.popShows[i];

     if ($.inArray(currentItem.id, followArray) > -1)
     {
       console.log("Following show: " + currentItem.name);
       currentItem.showFollowButton = false;
       currentItem.showUnFollowButton = true;

     }else{
       currentItem.showUnFollowButton = false;
       currentItem.showFollowButton = true;
     }
  }
  ...

The currentItem.show(Un)FollowButton = true/false does not work. How would I go around doing this?

Note: I tried button a function in nf-show which would run at page load and get the true/false values but then there is the problem of how do I change it again, when user presses Follow or UnFollow button.

Thanks!

Upvotes: 1

Views: 279

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You have already bounded showUnFollowButton & showFollowButton property inside for loop for each element. But while using them on Html you are not using it correctly.

You need to change your ng-show to below, as you are already have those property binded to each element inside for loop.

ng-show="popShow.showUnFollowButton"

ng-show="popShow.showFollowButton"

Upvotes: 2

Related Questions