ng-repeat 中的 ng-show 和 ng-hide答案

【问题标题】：ng-show and ng-hide inside ng-repeatng-repeat 中的 ng-show 和 ng-hide
【发布时间】：2015-10-25 23:45:46
【问题描述】：

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

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

followingList 是我关注的人的列表

问题是，如果我将 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}
        })
      }
    })
  })

【问题讨论】：

您需要为每个用户存储followingButtonTab，作为以下数组中的一个属性。
@Gonzalo.- 谢谢你的工作！！！
如果您不想为对象添加属性，也可以在控制器中将user 传递给activeUser 并使用ng-show="user == activeUser"
@claudia1201 如果您的解决方案正常工作，然后将其发布以供将来参考 - 或者接受 Paul GR 的回答

标签： angularjs ng-repeat ng-show ng-hide

【解决方案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;
      }
    });
  });

它应该可以工作。

【讨论】：