0

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

这两个 _.each 函数正在从另一个用户那里获取关注者信息

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

问题是，如果我将 ng-show 和 ng-hide followingButtonTab 设置为 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}
        })
      }
    })
  })
4

1 回答 1

0

您当前正在使用唯一的 $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;
      }
    });
  });

它应该工作。

于 2015-10-26T00:14:44.383 回答