我对 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>
最佳答案
如果我理解正确的话,只需使用 $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 (作为我的代码中的参数,而不是数组中用户的索引)。
关于javascript - 基于Angular的三条件按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30537654/