Ruby on rails API调用后角度更新ng show/ng hide

我对Angular还不熟悉，但仍在努力了解它是如何运作的以及最佳实践。我的应用程序是一个利用Angular的单页Rails应用程序

我正在编写一篇文章，其中一个用户可以跟随/不跟随另一个用户。基于后端的构造方式（使用Mongo），追随者被嵌入到用户模型中

我希望发生的是，当用户单击follow时，它会发布一个API调用来跟踪用户，然后按钮从“follow”更改为“unfollow”。我已经用API处理了follow和unfollow部分，只是不知道如何在切换时将按钮从follow切换到unfollow和back

由于从用户模型中提取数据来构建概要文件页面，并且用户模型上没有发生follow/unfollow，因此我猜这就是绑定不能自动工作的原因。我通过增加/减少跟随者计数，并将用户推到数组中，将其添加到跟随者中，从而解决了这个问题

只需要在这里提供切换按钮的最佳实践帮助。这里也可以进行任何其他重构

这是我到目前为止得到的

用户\u控制器：

recipe.controller "UsersCtrl", ['$scope', '$routeParams', 'User', 'Follower', ($scope, $routeParams, User, Follower) ->
  $scope.breadcrumb = $routeParams.id
  $scope.current_user_name = window.current_user_name
  $scope.user = User.get({id: $routeParams.id})
  $scope.addFollower = ->
    newFollower = new Follower({user_id: $scope.current_user_name, follower_id: $routeParams.id})
    newFollower.$save() # Add success / failure 
    $scope.user.followers.push({username: $scope.current_user_name})
    $scope.user.follower_count += 1
  $scope.removeFollower = ->
    removeFollower = new Follower({user_id: $scope.current_user_name, follower_id: $routeParams.id})
    removeFollower.$delete()
    $scope.user.follower_count -= 1

  $scope.myProfile = ->
    if $scope.current_user_name == $routeParams.id
      return true
    else
      return false
  $scope.followsUser = ->
    in_followers($scope.user.followers, $scope.current_user_name)

  in_followers = (array, username) ->
    i = 0  
    while i < array.length
      return (array[i].username is username)
      i++
    false
] 

follower.js.coffee

 recipe.factory 'Follower', ['$resource', ($resource) ->
  Follower = $resource("/api/users/:user_id/follows", {user_id: "@user_id", follower_id: "@follower_id"}, 
    delete: {method: "DELETE", url: "/api/users/:user_id/follows/:follower_id", params: {user_id: "@user_id", follower_id: "@follower_id"}})
]

---

谢谢

在控制器中，您需要为IsFollow添加一个值并保持更新，然后从UI/标记中执行以下操作之一，以下是两个：

使用两个按钮切换可见性

<button ng-show="isFollowing" ng-click="removeFollower()">Unfollow</button>
<button ng-hide="isFollowing" ng-click="addFollower()">Follow</button>

Unfollow
跟随

或者，您可以使用一个按钮更改按钮的文本，并公开一个名为setFollower的新函数，该函数将在内部调用addFollower或removeFollower

<button ng-click="setFollower()">{{ isFollowing ? 'Unfollow' : 'Follow' }}</button>

{{isfollow？'Unfollow'：'Follow'}

谢谢。这很有帮助。特别是关于如何实现单个按钮的部分。我没想到！

<button ng-click="setFollower()">{{ isFollowing ? 'Unfollow' : 'Follow' }}</button>