Question

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

问题： 我正在尝试创建一个包含三个阶段的按钮：

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

因此，如果您要添加用户，请点击添加按钮 向服务器发送ajax请求，如果成功则按钮然后应该变成待定按钮。
如果您再次点击该状态，则处于待处理状态，您的请求将是已删除，它将再次返回添加按钮。
第三阶段也是如果用户已接受您的请求，您将会看到删除用户按钮，当您点击
时您将再次看到添加按钮，如果您点击，您将获得 待定按钮等等。

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

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

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

我遗留下来的一些混乱的失败代码未完成：

角度控制器：

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查看：

<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（作为我的代码中的参数，而不是数组中用户的索引）。

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

基于Angular

2 个答案: