javascript - 基于Angular的三条件按钮

Question

我对 Angular 相当陌生，我对它的所有文档感到迷失。

问题:我正在尝试创建一个具有三个阶段的按钮:

添加用户 - 删除请求 - 删除用户

• 因此，如果您想添加用户，请单击添加按钮，向服务器发送 ajax 请求，如果成功则按钮然后应该变成待处理按钮。

• 在待处理状态下，如果您再次点击它，您的请求将被删除后，它将再次变回添加按钮。

• 第三阶段也是如果用户接受了您的请求，您当您点击
  时，将会看到一个删除用户按钮您将再次看到添加按钮，如果您单击该按钮，您将获得待处理按钮等等。

所以基本上，如果您一直在使用社交网络，那么这是一个熟悉的按钮。

加载页面时，用户将根据其当前条件看到用户和每个用户的按钮(因此服务器将处理这部分)。从这一部分开始，Angular 应该处理 ajax 调用并根据用户连接请求更改按钮。

我需要什么:我已经完成了发送请求的 Ajax 部分。但是，我无法处理 Angular 需要将按钮更改为新状态的部分(对于列表中的特定用户，这意味着列表中有超过 1 个用户，您可以发送连接添加/挂起/删除请求。 )我尝试了不同的解决方案，但到目前为止都失败了。

我未完成的一些困惑的失败代码:

Angular Controller :

foundationApp.controller('ConnectionButtonCtrl', function ($scope, $http) {
    $scope.addUser = function(id) {
            $http({
            method  : 'GET',
            url     : '/api/connections/add/'+id,
            dataType: "html",
        })
        .success(function() {
            $scope.activeId;
            $scope.activeId = id;
            $scope.isAdd = function(id){
                return  $scope.activeId === id;
            };

        })
    };
    $scope.removeRequest = function(id) {
            $http({
            method  : 'GET',
            url     : '/api/connections/removeRequest/'+id,
            dataType: "html",
        })
        .success(function() {
        })
    };

});

Laravel Blade View :

<span ng-controller="ConnectionButtonCtrl"  >
    <a class="label radius fi-plus" ng-show="!isRemove(1)" ng-click="addUser(1)"></a>
    <a class="label radius fi-clock info" ng-show="isRemove(1)" ng-click="removeRequest(1)"></a>
    <a class="label radius fi-x alert" ng-show="!isAdd(1)" ng-click="removeUser(1)"></a>
</span>

Answer 1

如果我理解正确的话，只需使用 $index 或 user.id 即可。我假设您的按钮与用户位于同一行。如果这是真的，那么您可能正在使用 ng-repeat。

例如:

<div ng-repeat="user in users">
  <a class="label radius fi-plus" ng-show="!isRemove(user.id)" ng-click="addUser(user.id)"></a>
  <a class="label radius fi-clock info" ng-show="isRemove(user.id)" ng-click="removeRequest(user.id)"></a>
  <a class="label radius fi-x alert" ng-show="!isAdd(user.id)" ng-click="removeUser(user.id)"></a>
  <div> some user information {{user.name}} </div>      
</div>

然后您可以通过 ajax 请求传递用户的 id。您还可以使用 $index (作为我的代码中的参数，而不是数组中用户的索引)。