jquery - 如何更改列表中只有一个用户的状态？

Question

我有一个登录我的应用程序的用户列表，他们可以有三种状态:信息、成功和帮助，并在每个用户旁边制作了三个按钮，以便他们可以在单击这些按钮时更改他们的状态。当用户单击特定按钮时，我想更改该按钮的类，但我被困在这里，因为当我单击某个用户的某个按钮时，他更改了首先登录到应用程序的用户的状态(我列表中的第一个用户) ).

这是我的 html:

    <ul class="list-unstyled" style="color:white; font-size:20px;
    margin-top:-10px; margin-left:-14.5px">
        <li style="padding: 15px 0px 15px 30px; border-bottom:solid #0A2A0A;
        margin-right:-14.5px" ng-repeat="user in users">
            {{user.username}}
            <span style="padding-right:15px"></span>
            <div class="btn-group btn-group-md" role="group" aria-label="...">
                <button id="info" type="button" class="btn btn-info" 
                ng-click="info(user.username)">
                    <i class="glyphicon glyphicon-pencil"></i>
                </button>
                <button id="success" type="button" class="btn btn-default" 
                ng-click="success(user.username)">
                    <i class="glyphicon glyphicon-ok"></i>
                </button>
                <button id="help" type="button" class="btn btn-default" 
                ng-click="help(user.username)">
                    <i class="glyphicon glyphicon-question-sign"></i>
                </button>
            </div>
        </li>
    </ul>

这是该 html 的 Controller :

    taskApp.controller('TaskNumController', function($scope, $route, $routeParams){
        $scope.tasks = $route.current.locals.task;
        $scope.users = $route.current.locals.users;

        $scope.success = function(name){
            $('#info').removeClass('btn-info').addClass('btn-default');
            $('#success').removeClass('btn-default').addClass('btn-success');
            $('#help').removeClass('btn-danger').addClass('btn-default');
        };
        $scope.help = function(name){
            $('#info').removeClass('btn-info').addClass('btn-default');
            $('#success').removeClass('btn-success').addClass('btn-default');
            $('#help').removeClass('btn-default').addClass('btn-danger');
        };
        $scope.info = function(name){
            $('#info').removeClass('btn-default').addClass('btn-info');
            $('#success').removeClass('btn-success').addClass('btn-default');
            $('#help').removeClass('btn-danger').addClass('btn-default');
        };
    });

taskApp 是我的模块的名称。

谁能帮帮我？我将非常感激 :)

Answer 1

在这种情况下，最好的办法是在元素上使用 ng-class 属性，而不是在 Controller 中处理样式更改。

Controller

taskApp.controller('TaskNumController', function($scope, $route, $routeParams){
        $scope.tasks = $route.current.locals.task;
        $scope.users = $route.current.locals.users;
        $scope.setUserStatus = function(user, status){
           user.status = status;
        }
    });

查看

<div class="btn-group btn-group-md" role="group" aria-label="...">
                <button id="info" type="button" class="btn" 
                ng-click="setUserStatus(user, 'info')" ng-class="{'btn-info': user.status === 'info', 'btn-default': user.status !== 'info' }">
                    <i class="glyphicon glyphicon-pencil"></i>
                </button>
                <button id="success" type="button" class="btn btn-default" 
                ng-click="setUserStatus(user, 'success')" ng-class="{'btn-success': user.status === 'success', 'btn-default': user.status !== 'success' }">
                    <i class="glyphicon glyphicon-ok"></i>
                </button>
                <button id="help" type="button" class="btn btn-default" 
                ng-click="setUserStatus(user, 'help')" ng-class="{'btn-danger': user.status === 'help', 'btn-default': user.status !== 'help' }">
                    <i class="glyphicon glyphicon-question-sign"></i>
                </button>
            </div>

这意味着您必须为每个用户维护一个状态，但这应该没什么大不了的。或者，您也可以在 ng-click 中设置状态 (ng-click="user.status = 'info';") 而不是调用函数，但我认为如果 Controller 实际处理会感觉更干净一些那个。