javascript - 用图像标记活跃用户

Question

我得到了这个用户列表，我想用圆圈左侧的箭头直观地显示活跃用户。

不确定如何用 Angular 来解决这个问题

这是我的 CodePen:http://codepen.io/GY22/pen/VLdGPO .我必须提到，在 CodePen 中没有登录系统(我的原始元素中有一个，我能够检索登录用户的当前用户 ID)

这就是我想要实现的目标 -> 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;
}

Answer 1

因为你可以访问当前用户的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>