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

Question

到目前为止,我已经设法获得引导下拉按钮,根据点击的项目更改其标题.

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 示例。请注意，我已将按钮更改为拆分按钮（否则 href 根本没有用，因为它会被切换覆盖）。