Question

我有两个带有ng-show的元素，

%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-shows中的一个。

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

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

当用户点击它时，我想隐藏点击的ng-show，并显示unfollow ng-show，以便用户可以取消关注刚跟随的用户。

关注和取消关注用户功能

$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-shows之间切换，但当我尝试获取isFollowed(user.id)，!isFollowed(user.id)时，代码会崩溃。

Answer 1

你应该创建单个函数来跟随/取消关注，这里在代码片段中我引入了一个新属性，即isFollowed到对象user，其值是使用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函数。但是，在函数的末尾，我没有两个.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"}}

在2 ng节目之间切换

2 个答案: