当用户从下拉列表中选择一个选项时,如何更改按钮上的文本? (angular.js)

时间:2016-01-18 19:47:39

标签: javascript html angularjs twitter-bootstrap

我正在使用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>

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

1 个答案:

答案 0 :(得分:0)

我在范围内保留一个标志,只会设置一次为真

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