使用 ng-repeat 处理多个 ng-show

Question

我有一个使用 ng-repeat 的项目列表。每个项目都有两个按钮 "Follow" 和 "Unfollow"。我需要根据已经关注的项目（数组列表包含关注的项目）一次显示两者中的任何一个。

在我的 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>

在我的控制器中，我需要更改特定项目按钮 ng-show 的值。我正在尝试这样做

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

currentItem.show(Un)FollowButton = true/false 不起作用。我该怎么做？

注意：我在 nf-show 中尝试了一个函数按钮，它会在页面加载时运行并获得 true/false 值，但随后有当用户按下“关注”或“取消关注”按钮时，如何再次更改它的问题。

谢谢！

Answer 1

您已经为每个元素在 for 循环内设置了 showUnFollowButton & showFollowButton 属性边界。但是在 Html 上使用它们时你没有正确使用它。

您需要将 ng-show 更改为以下内容，因为您已经将那些属性绑定到 for 循环中的每个元素。

ng-show="popShow.showUnFollowButton"

ng-show="popShow.showFollowButton"

使用 ng-repeat 处理多个 ng-show

Multiple ng-show handling with ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-repeat

ng-show