Три кнопки состояния на основе Angular

Question

Я довольно новичок в Angular и чувствую себя потерянным во всей его документации.

Проблема: Я пытаюсь создать кнопку, которая имеет три фазы:

Добавить пользователя - Удалить запрос - Удалить пользователя

• Так что, если вы хотите добавить пользователя, нажмите на кнопку Добавить кнопку, которая отправляет запрос ajax на сервер, и в случае успеха кнопка должна затем превратиться в Pe nding.

• В ожидающем состоянии, если вы нажмете на него снова, ваш запрос будет удален , и он снова вернется к кнопке Add.

• Третья фаза также, если пользователь принял ваш запрос, вы будет видеть кнопку пользователя в Удалить, который при нажатии кнопки на
  вы снова увидите кнопку Добавить, который, если вы щелкаете вас получит В ожидании кнопки и так далее.

В основном это знакомая кнопка, если вы используете социальные сети.

Когда страница загружена, пользователь увидит пользователей и кнопки для каждого пользователя на основе текущего состояния (так что сервер будет обрабатывать эту часть). Из этой части Angular должен обрабатывать вызовы ajax и изменение кнопки на запрос пользователя.

Что мне нужно: Я сделал часть Ajax для отправки запроса. Однако я не могу справиться с той частью, которую Angular должен изменить в новом состоянии (для конкретного пользователя в списке, что означает, что в списке более 1 пользователя, которые вы можете отправлять, добавлять/откладывать/удалять запросы на подключение.) Я пробовал разные решения, но провалился до сих пор.

Некоторые из моего грязного кода ошибки, который я оставил незавершенным:

Угловой Контроллер:

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 лезвие Вид:

<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. Вы также можете использовать $ index (в качестве параметра в моем коде вместо индекса пользователя в массиве).

Answer 2

DEMO: http://plnkr.co/edit/hhOdNTV6ogJHhtXcM03a?p=preview

JS

var app = angular.module('myApp', []); 
app.controller('myController', function ($scope) { 
    $scope.users = { 
     user1: { 
     'status': 'add', 
     'statusClass': 'positive' 
     }, 
     user2: { 
     'status': 'pending', 
     'statusClass': 'waiting' 
     }, 
     user3: { 
     'status': 'remove', 
     'statusClass': 'negative' 
     } 
    }; 

    $scope.handle = function (user) { 
    if (user.status === 'add') { 
     alert('send request to the user'); 
     user.status = 'pending'; 
     user.statusClass = 'waiting' 
    } 
    else if (user.status === 'pending') { 
     alert('send request to discard a connection req'); 
     user.status = 'add'; 
     user.statusClass = 'positive' 
    } 
    else { 
     alert('send req for removal'); 
     user.status = 'add'; 
     user.statusClass = 'positive' 
    } 
    }; 
}); 

app.$inject = ['$scope']; 

HTML:

<body ng-app="myApp" ng-controller="myController"> 
    <div ng-repeat="user in users"> 
    User {{$index+1}} - <button ng-click="handle(user)" ng-class="user.statusClass">{{ user.status }}</button> 
    </div> 
</body> 

http://plnkr.co/edit/hhOdNTV6ogJHhtXcM03a?p=preview