Question

我所做的是使用预先存在的HTML模板，我会浏览它上面的所有元素，将其转换为AngularJS，仅用于学习目的和最佳实践。

我有一个部分供用户更改其状态（Online，Away，Busy）。 HTML看起来像这样：

<div class="sidebar-right-header" data-ng-controller="SidebarRightController">
    <div class="pull-right posr" dropdown>
        <a href class="dropdown-toggle">
            <i class="fa fa-circle fs8" data-ng-class="{
                'text-green2': userStatus.online,
                'text-red2': userStatus.busy,
                'text-orange2': userStatus.away}">
            </i> <span class="caret text-muted"></span>
        </a>
        <ul class="dropdown-menu dropdown-sm" role="menu">
            <li class="menu-arrow">
                <div class="menu-arrow-up"></div>
            </li>
            <li data-ng-click="SwitchStatus('Online')"><a href="javascript:void(0);"><i class="fa fa-circle text-green2 pr5"></i> Online</a></li>
            <li data-ng-click="SwitchStatus('Busy')"><a href="javascript:void(0);"><i class="fa fa-circle text-red2 pr5"></i> Busy</a></li>
            <li class="divider"></li>
            <li data-ng-click="SwitchStatus('Away')"><a href="javascript:void(0);"><i class="fa fa-circle text-orange2 pr5"></i> Away</a></li>
        </ul>
    </div>
    <div class="media mtn"> <a class="pull-left mt5" href="#"> <img class="thumbnail thumbnail-sm rounded" src="img/avatars/2.jpg" alt="..."> </a>
        <div class="media-body">
            <h5 class="small mt5 mbn text-cloud"><b>Current Status:</b></h5>
            <h5 class="small text-white"><b>{{statusText}}</b></h5>
        </div>
    </div>
</div>

我问了另一个让我开始的问题，即使用ngClass指令来处理状态。您可以在上面示例的顶部看到它。我创建了一个与下拉选项相关联的函数，称为 SwitchStatus（）。最后一部分是 {{statusText}} ，因为我不确定如何正确绑定它。我的意思是，我可以...但我的控制器变得笨重，我只知道我做得不够有效。

这是我的控制人员：

function($scope) {
    var userStatuses = {
       online: true,
       busy: false,
       away: false
    };

    $scope.statusText = GetStatusText();

    function GetStatusText() {
        var text;
        switch(userStatuses) {
            case userStatuses.busy === true:
                text = "I'm busy...";
                break;
            case userStatuses.away === true:
                text = "I'm away...";
                break;
            default:
                text = "I'm online!";
        }
        return text;
    }

    $scope.SwitchStatus = function(option) {
        console.log(option);
        if ( option === 'Online' ) {
            userStatuses.online = true;
        } else if ( option === 'Busy' ) {
            userStatuses.busy = true;
            userStatuses.online = false;
            userStatuses.away = false;
        } else if ( option === 'Away' ) {
            userStatuses.online = false;
            userStatuses.busy = false;
            userStatuses.away = true;
        }
    };

   $scope.userStatus = userStatuses; // default online


}

最终（当我弄清楚我在做什么时）我想把高级逻辑绑定到这些选项中，所以我想确保我的控制器的结构能够以后轻松处理。

结论：尝试与用户状态进行流畅绑定，包括状态文本和表示绿点的类。你可以看到Font Awesome＆＃34; fa fa-circle＆＃34;现在，当切换状态时，ngClass部分可以工作，但状态文本没有。

希望我不会问一个愚蠢的问题：）

Answer 1

statusText只设置一次：$scope.statusText = GetStatusText();之后没有更新它，所以这就是它永远不会在UI中更改的原因。

有许多方法可以让它更新，但一种方法是在SwitchStatus函数的末尾设置它。

$scope.SwitchStatus = function(option) {
    console.log(option);
    if ( option === 'Online' ) {
        userStatuses.online = true;
    } else if ( option === 'Busy' ) {
        userStatuses.busy = true;
        userStatuses.online = false;
        userStatuses.away = false;
    } else if ( option === 'Away' ) {
        userStatuses.online = false;
        userStatuses.busy = false;
        userStatuses.away = true;
    }
    $scope.statusText = GetStatusText();
};

这可能/应该清理一些，但这可以完成工作。

在AngularJS中，如何将多个控件绑定在一起以显示下拉列表和文本？

1 个答案: