如何使更改標題的下拉按鈕具有不同的鏈接？

到目前爲止，我已經設法得到引導下拉按鈕來改變它的標題，取決於點擊的項目。如何使更改標題的下拉按鈕具有不同的鏈接？

但除此之外，我想對他們，當點擊下拉每個項目都有自己的鏈接。

我該怎麼做？

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; 
    } 
});

來源

2015-10-23 Alexander Shmatko

使用[ng-href]（https://docs.angularjs.org/api/ng/directive/ngHref） – giorgio

@giorgio你能提供一個小例子嗎？ –

做這樣的事情，使用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>

然後改變變量來保存對象的數組以下動作：

$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根本沒有用處，因爲它會被切換覆蓋）。

來源

2015-10-23 09:02:25 giorgio

這是一個很好的答案，但是請你可以改變我的[Codepen]（http://codepen.io/anon/pen/pjagZR），因爲我不能因爲一些神祕的原因讓它工作。 –

嗯，有幾個方法可以做到這一點，取決於你在做什麼。這裏有一個例子，如果你有單獨的文件範圍的每一個動作，你可以做一些與此類似：

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

來源

2015-10-23 08:48:06

如何使更改標題的下拉按鈕具有不同的鏈接？

回答

相關問題