在2个ng节目之间切换

Question

我有两个元素，其中有一个ng显示，

%a.follow{"ng-click" => "followUser(user)", "ng-show" => "!isFollowed(user.id)"} follow
%a.unfollow{"ng-click" => "unfollowUser(user)", "ng-show" => "isFollowed(user.id)"} unfollow

这取决于模板中渲染哪个ng show的user.id。因此，两个ng节目中只显示了一个。

例如，一个用户想要开始关注另一个用户。然后显示follow链接。

%a.follow{"ng-click" => "followUser(user)", "ng-show" => "!isFollowed(user.id)"} follow

当用户点击它时，我想隐藏点击的ng显示，并显示unfollow ng显示，这样用户就可以取消关注刚刚关注的用户。

跟随和取消跟随用户功能，

$scope.followUser = function (user) {
  followUser.create({
    followed_id: user.id
  }).then(init);
  Notification.success(user.name + ' is toegevoegd als vriend.');
}
$scope.unfollowUser = function(user){
  unfollowUser.unfollowUser(user).then(function(){
  },function(){
  }).then(init);
  Notification.success(user.name + ' is verwijderd als vriend.');
}

以及isFollowed函数

usersService.loadUsers().then(function(response) {
  $scope.users = response.data;
  console.log ($scope.users)
  angular.forEach(response, function(user){
    $scope.user = user
    $scope.isFollowed = function(userId) {
      var following = $scope.current_user.following;
      for (var i=0; i<following.length; i++) {
        if (following[i].id == userId) {
          return true;
        }
      }
      return false;
    }
  })
})

我试过建造这个

<a ng-click="follow=false ;unfollow=true", ng-show="follow">Follow!</a>
<a ng-click="follow=true; unfollow=false", ng-show="unfollow">Unfollow!</a>

这确实在两个ng节目之间切换，但当我试图在其中获得isFollowed(user.id)、!isFollowed(user.id)时，代码会崩溃。

Answer 1

您应该创建一个函数来跟随/取消跟随，在代码片段中，我为对象user引入了一个新属性，即isFollowed，其值是使用isFollowed函数设置的。

此外，不要过度使用isFollowed(user.id)方法，它将对性能造成巨大的打击。

HTML

<a ng-click="followUnfollowUser(user)"> {{ user.isFollowed : "Unfollow!" : "Follow!"}}  </a>

脚本

$scope.followUnfollowUser = function(user) {
    //If followed - unfollow
    if (user.isFollowed) {
        unfollowUser.unfollowUser(user).then(function() {
            user.isFollowed=!user.isFollowed
        }, function() {
        }).then(init);
        Notification.success(user.name + ' is verwijderd als vriend.');
    } else {
        followUser.create({
            followed_id: user.id
        }).then(function() {
            user.isFollowed=!user.isFollowed
        }, function() {
        }).then(init);
        Notification.success(user.name + ' is toegevoegd als vriend.');
    }
}
//Define method to check wheather current user is beign followed
var isFollowed = function(userId) {
    var following = $scope.current_user.following;
    for (var i = 0; i < following.length; i++) {
        if (following[i].id == userId) {
            return true;
        }
    }
    return false;
}
//Fetch Users
usersService.loadUsers().then(function(response) {
    $scope.users = response.data;
    //Iterate and create isFollowed property
    angular.forEach($scope.users, function(user) {
        user.isFollowed = isFollowed(user.id);
    })
})

注意：我不熟悉以下语法，因此使用了标准HTML。

%a.follow{"ng-click" => "followUser(user)", "ng-show" => "!isFollowed(user.id)"} follow

Answer 2

Alrhgout Satpal确实为我指明了正确的方向，并帮助我编写了一些代码。他的回答不完整。所以我决定添加我用于此函数的代码（在Satpal的帮助下制作！）。

我创建了一个followUnfollowUser函数。但是，我在函数末尾有一个init()，而不是两个.then(init)。有两个init给我带来了一些循环问题。

$scope.followUnfollowUser = function(user) {
    //If followed - unfollow
    if (user.isFollowed) {
        unfollowUser.unfollowUser(user).then(function() {
            user.isFollowed=!user.isFollowed
        }, function() {
        })
        Notification.success(user.name + ' is verwijderd als vriend.');
    } else {
        followUser.create({
            followed_id: user.id
        }).then(function() {
            user.isFollowed=!user.isFollowed
        }, function() {
        })
        Notification.success(user.name + ' is toegevoegd als vriend.');
    }
  init();
}

然后init功能，

var init = function () {
  loadCurrent_user.loadCurrent_user().then(function(response) {
    $scope.current_user = response.data;
  });
  usersService.loadUsers().then(function(response) {
    $scope.users = response.data;
    //Iterate and create isFollowed property
    angular.forEach($scope.users, function(user) {
      user.isFollowed = isFollowed(user.id);
    })
  })
  var isFollowed = function(userId) {
    var following = $scope.current_user.following;
    for (var i = 0; i < following.length; i++) {
      if (following[i].id == userId) {
          return true;
      }
    }
    return false;
  }
}

首先，我加载当前用户，以便在关注/取消关注用户时更新$scope.current_user。然后我遍历每个用户，并使用isFollowed函数创建isFollowed值。

在我的模板中，

%a{"ng-click" => "followUnfollowUser(user)"}
  -# {{ user.isFollowed }}
  {{ user.isFollowed ? "Unfollow user" : "Follow user"}}