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的控制器：

    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属性，而不是在控制器中处理样式更改。

<强>控制器

<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>

查看

HAVING()

这意味着你必须为每个用户保持一个状态，但这不应该是一个太大的交易。或者，您也可以在ng-click中设置状态（ng-click =＆＃34; user.status =＆＃39; info＆＃39 ;;＆＃34;）而不是调用函数，但是我如果控制器实际处理它，那么它会感觉有点清洁。

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

1 个答案: