Переключение между 2 нг-шоу

Question

У меня есть два элемента с нг-шоу в них,

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

Это зависит от user.id, который нг-шоу, подлежащего визуализации в шаблоне. Таким образом отображается только одно из двух ng-шоу.

Так, например, пользователь хочет начать с другого пользователя. Затем отображается ссылка follow.

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

Когда пользователь нажимает на нее, я хотел бы, чтобы скрыть щелкнули нг-шоу, и показать unfollow нг-шоу, так что пользователь может неследовать только что следует пользователю.

Последующий и неследовать функции пользователя,

$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

Вы должны создать одну функцию, чтобы следовать/неследовать, Здесь, в фрагменте кода я ввел новое свойство т.е. isFollowed объекта user, значение которого задается с помощью функции isFollowed.

Кроме того, не используйте излишний метод isFollowed(user.id), это будет огромный удар производительности.

HTML

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

Script

$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"}}