我收到了这个用户列表，我希望用圆圈左侧的箭头直观地显示活动用户。
不确定如何使用angular
进行此操作这是我的CodePen：http://codepen.io/GY22/pen/VLdGPO。我必须提一下，在CodePen中没有登录系统（我的原始项目中有一个，我能够检索登录用户的当前用户ID）
这是我想要实现的目标 - ＆gt; https://gyazo.com/7c45b04b6db5a2f9e7a24d1809821cbb
部分HTML代码
<!-- START SIDEBAR -->
<div id="logo-wrap">
<img id="logo" src="assets/images/logo2.png" alt="Zazzle Logo" >
</div>
<div id="sidebar" class="md-whiteframe-z4" ng-data-color="">
<div style="height: 80px;"></div>
<div class="userList">
<li id="customLI" ng-repeat="user in users" id="userPos" class="active circular md-whiteframe-z2" style="background-color: {{ user.color }} " ng-click="showPopUpDeletionConfirmation($event); setDeleteId( user._id )" ng-data-id="{{ user._id }}">
<div class="wrapperImageCurrentUser" id="marker_active_user"> </div>
<p class="initials" id="userValue" style="top: {{ user.top }};" >
<custom id="user._id"></custom>
{{user.initials}}
<!-- {{user.email}} -->
</p>
<md-tooltip>{{user.name}}</md-tooltip>
</li>
</div>
</div>
<!-- END SIDEBAR -->
部分app.js代码
//get the users from the API
UserService.getUsers = function () {
$http.get("api/users") //your API url goes here
.success(function(dataFromServer){
//console.log('LOGGING DATADROMSERVER ', dataFromServer);
//UserService.userList = [];
/*dataFromServer.forEach(function(user, index, arr) {
UserService.userList.push(user);
})*/
var initials = function(name){
var d1 = name.split(" ")[0].charAt(0).toUpperCase();
var d2;
try
{
d2 = name.split(" ")[1].charAt(0).toUpperCase();
}
catch(e){
d2 = "";
}
return d1 + d2;
console.log('LOGGING INITIALS ', d1 + d2);
}
for (var i = 0; i < dataFromServer.length; i++) {
UserService.userList[i] = dataFromServer[i];
UserService.userList[i].initials = initials(UserService.userList[i].name)
};
//here you should update the usersList from the server like this:
//UserService.usersList = dataFromServer;
return dataFromServer;
})
.error(function(errorFromServer){
//something went wrong, process the error here
console.log("Error in getting the users from the server");
})
};
UserService.addUser = function (pUser) {
//here you should do the $http.post and write some code on the .success() event.
//Just for an example I used here the .get() method to show you how to process the request, you should replace it
//note the return $http.post below which takes our promise further to the controller so we can use it there if we want:
return $http.post('api/users/invite', {
'email': pUser.email,
'role_id': pUser.role,
'name': pUser.name,
}, {
headers: {
"Content-Type": "text/plain"
}
})
.success(function (data, status, headers, config) {
//code to run if all went well:
console.log("Service: the user has been added", data);
//add the new user to the list.
//actually, you may want to call UserService.getUsers() here to get an updated list of users: all of them will automagically reflect in the page without refresh:
UserService.usersList.push(pUser);
})
.error(function (data, status, headers, config) {//we had an error
console.log("Failed to add user to DB");
});
};
UserService.deleteUser = function (){
$http.delete('api/users/' + deleteId)
.success(function(dataFromServer){
var index;
for (var i = 0; i < UserService.userList.length; i++) {
if(UserService.userList[i]._id == deleteId){
//index = i;
console.log ("removing the element from the array, index: ", deleteId, i);
UserService.userList.splice(i,1);
}
};
/* if(deleteId !== -1){
console.log ("removing the element from the array, index: ", deleteId, index);
UserService.userList.splice(index,1);
}*/
console.log('userArray ', UserService.userList)
$('li[ng-data-id="'+ deleteId +'"]').remove();
})
.error(function(errorFromServer){
//something went wrong, process the error here
console.log("Error in getting the users from the server");
})
};
return UserService;
}）
angular.module('zazzleToolPlannerApp')
.controller('CalendarCtrl', function ($scope, $mdDialog, $http, $rootScope, $timeout, User, Auth, UserService, TaskService) {
$scope.isAdmin = Auth.isAdmin;
$scope.getCurrentUser = Auth.getCurrentUser;
$scope.newUser = {};//this is the new user object. You can initialise it however you want
$scope.newUser.email = "";//initialize the data for the new user
$scope.newUser.role = "";
$scope.newUser.name = "";
$scope.users = UserService.userList;
//ask the service to grab the data from the server. This is bound to the first button in the page
$scope.getDataFromService = function () {
UserService.getUsers(); //after this gets called, the data will be shown in the page automatically
}
$scope.getDataFromService();
//ask the service to add a new user with the API (called from the second button):
$scope.addUserWithService = function () {
//note that you can process the promise right here (because of the return $http in the service)
UserService.addUser($scope.newUser)
.success(function(data){
//here you can process the data or format it or do whatever you want with it
console.log("Controller: the user has been added");
$scope.users = [];// EMPTY THE ARRAY
UserService.getUsers();
})
.error(function(data){
//something went wrong
console.log("Controller: the user has been added");
});
}
$scope.deleteUserWithService = function(){
UserService.deleteUser();
}
$scope.getUserId = function(id) {
user_id = $scope.getCurrentUser()._id;
console.log("gettting user id -->", user_id);
}
$scope.getUserId();
});
//END CONTROLLER
CSS：
#sidebar {
position: fixed;
width: 120px;
height: 100%;
background-color: #000;
z-index: 33;
margin-top: 0px;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 100px
}
#userList {
padding-bottom: 10px !important;
}
ul li {
margin-left: 15px;
list-style-type: none;
}
.circle {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #fff;
}
.initials {
font-weight: bold;
font-size: 18px;
text-align: center;
vertical-align: middle;
padding-top:15px;
}
.wrapperImageCurrentUser{
float: left;
background-image: url(http://www.nappdev.be/arrow_active_user.png);
background-repeat: no-repeat;
height: 40px;
width: 40px;
vertical-align: middle;
}
答案 0 :(得分：2)
您可以访问当前用户的user_id。你可以将它存储在
中$ scope.currentUserId =当前用户ID;
您可以使用此currentUserId以箭头显示活动用户。
请参阅http://codepen.io/anon/pen/ZGPPaX
$scope.currentUserId=5;
$scope.users = [{
initials: 'GY',
id:2
}, {
initials: 'XX',
id:5
}] <li ng-repeat="user in users" class="circular circle">
<div ng-if="user.id==currentUserId" class="wrapperImageCurrentUser" id="marker_active_user"> </div>
<p class="initials">{{user.initials}}</p>
</p>
</li>
答案 1 :(得分：1)
您可以通过扩展用户对象并实现ng-show ||来实现此目的ng-hide角度绑定属性。
例如，让我们扩展您的用户对象以获得isActive标志。
$scope.users = [{
initials: 'GY',
isActive: false
}, {
initials: 'XX',
isActive: true
}];
现在我们可以在我们的HTML迭代器中包含用户..
<li ng-repeat="user in users" class="circular circle">
<!--Here is where the arrow will be if user is active. -->
<div ng-show="user.isActive" class="wrapperImageCurrentUser" id="marker_active_user"> </div>
<!--Here are the initials as before. -->
<p class="initials">{{user.initials}}</p>
</li>
如您所见，我们已将wrapperImageGurrentUser添加到foreach循环中。
当项目isActive设置为true时，这将显示箭头。
你需要玩你的CSS，但这应该足以让你前进。