Question

我在ng-repeat中有两个按钮。我希望以下按钮显示我是否已经关注该人，否则应显示以下按钮。

两个_.each函数正在抓取来自其他用户的关注者信息

以下列表是我关注的人员列表

问题是如果我将ng-show和ng-hide followButtonTab设置为true，它会对ng-repeat的所有实例执行此操作。我的问题是，如何影响ng-repeat的一个实例，以便ng-show和ng-hide适当改变。

感谢您的帮助！

HTML

<div class="follofwingBox" ng-repeat="user in following">
  <img class=" profile-img img-circle"  ng-src="{{user.img}}" || src="Assets/usericon.png" alt="User Pic"/>
  <div class="il">
   <span>{{user.name}}</span></br>
   <span>{{user.occupation}}</span></br>
  </div>
  <button class="follow-button text-uppercase btn btn-default btn-xs" ng-hide="followingButtonTab" ng-click="followTab()">Follow</button>
  <button class="follow-button text-uppercase btn btn-default btn-xs" ng-show="followingButtonTab">Following</button>
</div>

控制器

$scope.following = []
  _.each(currentUser.following, function(id) {
    _.each(users, function(user) {
      if (id.followingId === user.$id) {
        $scope.following.push({
          name: user.name,
          img: user.img,
          id: user.$id,
          occupation: user.ocupation
        })
        $scope.followingLength = $scope.following.length

        followingList.$loaded().then(function(followingList){
          getitem = _.findWhere(followingList, {followingId : user.$id})
          if(getitem)
          {$scope.followingButtonTab = true}
        })
      }
    })
  })

Answer 1

您当前正在使用唯一的$ scope变量来存储关注按钮的状态。所有按钮都具有相同的状态，具体取决于最后一次.each（）迭代设置变量的方式。

要解决您的问题，您可以在存储在数组中的对象中添加一个布尔字段（这将为每个条目存储按钮状态）。在ng-repeat的每次迭代中检查此字段，而不是检查全局$ scope变量，如下所示：

模板

<button ng-hide="user.followingButtonTab" ng-click="followTab()">Follow</button>
<button ng-show="user.followingButtonTab">Following</button>

控制器

$scope.following = [];
  _.each(currentUser.following, function(id) {
    _.each(users, function(user) {
      if (id.followingId === user.$id) {
        // Create the user object with a followingButtonTab field
        var following = {
          name: user.name,
          img: user.img,
          id: user.$id,
          occupation: user.ocupation,
          followingButtonTab: false
        };

        // Perform checking and store the result for each iteration
        followingList.$loaded().then(function(followingList){
          getitem = _.findWhere(followingList, { followingId : user.$id });
          if(getitem) {
            following.followingButtonTab = true;
          }
        });

        // Insert the user object in the array
        $scope.following.push(following);

        $scope.followingLength = $scope.following.length;
      }
    });
  });

它应该有用。

ng-show中的ng-show和ng-hide

1 个答案: