javascript - 当用户从下拉列表中选择一个选项时，如何更改按钮上的文本？ ( Angular .js)

Question

我正在用 angular.js 和 bootstrap 编写一个网页，我有一个与 this one 完全一样的组件 当用户展开菜单并选择操作时 - 我想更改按钮上的文本。到目前为止，我的代码如下所示:

<div class="btn-group">
    <button type="button" class="btn btn-danger" ng-click="queryUsers()">Show data from last hour</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
         <li><a ng-click="queryUsersFromYesterday()">Show data from yesterday</a></li>
         <li><a ng-click="queryUsersFromLastWeek()">Show data from last week</a></li>
         <li><a  ng-click="queryUsersFromLastMonth()">Show data from last month</a></li>
    </ul>
</div>

现在当用户点击:显示上周的数据时——菜单消失了，但按钮仍然有一个文本:显示上一小时的数据。如何动态更改按钮上的文本？

Answer 1

我会在范围内维护一个标志，它只会设置一次为真

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ng-click="buttonClicked = true;">
    <span ng-class="buttonClicked? 'caret': 'sr-only'" 
      ng-bind="buttonClicked? 'Toggle Dropdown': 'Toggled'">
    </span>
</button>