Question

到目前为止，我已设法获取引导下拉按钮，根据点击的项目更改其标题。

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

我该怎么做？

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

执行此类操作

首先将按钮更改为锚点并添加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完全没用，因为它会被切换覆盖）。

Answer 2

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

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

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

2 个答案: