Javascript 基于角度的三条件按钮
我对Angular是个新手，我对它的所有文档都感到迷茫 问题： 我正在尝试创建一个按钮，它有三个阶段： 添加用户-删除请求-删除用户Javascript 基于角度的三条件按钮,javascript,angularjs,laravel,zurb-foundation,Javascript,Angularjs,Laravel,Zurb Foundation,我对Angular是个新手，我对它的所有文档都感到迷茫 问题： 我正在尝试创建一个按钮，它有三个阶段： 添加用户-删除请求-删除用户 因此，如果要添加用户，请单击添加按钮 向服务器发送ajax请求，如果成功，则单击按钮 然后应变为挂起按钮 在挂起状态下，如果您再次单击它，您的请求将被删除 已删除，它将再次返回到添加按钮 第三个阶段也是，如果用户接受了您的请求，那么 当您单击时，将看到一个删除用户按钮 您将再次看到“添加”按钮，如果单击该按钮，您将获得 挂起按钮等等 因此，如果你一直在使
- 因此，如果要添加用户，请单击添加按钮 向服务器发送ajax请求，如果成功，则单击按钮 然后应变为挂起按钮
- 在挂起状态下，如果您再次单击它，您的请求将被删除 已删除，它将再次返回到添加按钮
- 第三个阶段也是，如果用户接受了您的请求，那么
当您单击
时，将看到一个删除用户按钮 您将再次看到“添加”按钮，如果单击该按钮，您将获得 挂起按钮等等
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() {
})
};
});
<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>
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() {
})
};
});
<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>
一些用户信息{{user.name}
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'];
<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>
用户{{$index+1}}-{{User.status}
什么是$connection->id？（我不熟悉laravel）@NexusDuck我忘了提到“{{”和“}}}”是用于PHP框架视图（blade）的，我已经将Angular的语法更改为“”，因此不会出现错误conflicts@NexusDuck假设这些是行号或只是我们要连接到的用户id，例如：ng show=“！isremove（1）”删除请求不应该是
DELETEGET