Come rendere il pulsante Dropdown che cambia il suo titolo ha diversi link?

Question

Finora sono riuscito a ottenere il pulsante a discesa del bootstrap per cambiarne il titolo in base all'elemento selezionato.

Codepen

Ma oltre a questo io voglio ogni elemento discesa per avere il proprio collegamento quando si fa clic su di essi.

Come posso fare questo?

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

fare qualcosa di simile, utilizzando ng-href

prima cambiare il pulsante per un'ancora e aggiungi l'attributo 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> 

Poi alterare le azioni variabili per contenere un array di oggetti:

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

Poi finalmente alterare la funzione scelta per aggiornare il nome dell'azione e href

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

EDIT Ora con un CodePen example. Notare che ho cambiato il pulsante in un pulsante diviso (altrimenti l'href non ha alcun senso, perché sarebbe stato sovrascritto dal commutatore).

Answer 2

Bene, ci sono alcuni modi per fare questo, dipende da quello che stai facendo. Ecco un esempio, se si dispone di ogni azione portata in file separato, si può fare qualcosa di simile a questo:

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