javascript - 如何使更改其标题的下拉按钮具有不同的链接？

Question

到目前为止，我已经设法让 bootstrap 下拉按钮根据单击的项目更改其标题。

Codepen

但除此之外，我希望每个下拉项在单击时都有自己的链接。

我该怎么做？

HTML

<div ng-app='myApp'>
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        {{button}} <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>
        </li>
      </ul>
    </div>

  </div>
</div>

CSS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function($scope) {
  $scope.button = "Button dropdown";
  $scope.actions = [
    "Action", "Another Action", "Something else here"
  ];

  $scope.change = function(name){
    $scope.button = name;
  }
});

Answer 1

做这样的事情，使用 ng-href

先把按钮改成anchor，加上ng-href属性；

<a href ng-href="{{ href }}" id="single-button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    {{ name }} <span class="caret"></span>
</a>

然后改变 actions 变量来保存一个对象数组:

$scope.actions = [
    {
        name: 'Action',
        href: 'action.html'
    },
    {
        name: 'Another Action',
        href: 'another_action.html'
    },
    {
        name: 'Something else here',
        href: 'something_else_here.html'
    }
];

最后修改更改函数以更新操作的名称​​和 href

$scope.change = function(action){
    $scope.name = action.name;
    $scope.href = action.href;
}

编辑 现在有一个 CodePen example .请注意，我已将按钮更改为拆分按钮(否则 href 根本没有用，因为它会被切换覆盖)。