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

Question

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

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

我该怎么做？

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

好吧，有几种方法可以做到这一点，这取决于你在做什么。这是一个例子，如果你在单独的文件中有范围内的每个动作，你可以做类似的事情：

<form name="dropdownctrl>
<select name="list" accesskey="target">
<option selected>Whatever</option>
<option value="action.html">Action</option>
<option value="anotheraction.html">Another Action</option>
<option value="something else.html">something else</option>
<select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">

Answer 2

做这样的事情，使用 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 根本没有用，因为它会被切换覆盖）。

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

How to make Dropdown button that changes its title have different links?

javascript

twitter-bootstrap

angularjs

angular-ui

twitter-bootstrap-3