Jak utworzyć przycisk rozwijania, który zmienia tytuł, ma różne linki?

Question

Do tej pory udało mi się uzyskać przycisk rozwijania bootstrap, aby zmienić jego tytuł w zależności od klikniętego elementu.

Codepen

Ale poza tym chcę każdy element rozwijana mieć swój odnośnik po kliknięciu na nich.

Jak mogę to zrobić?

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

coś jak to zrobić, używając ng-href

Pierwszy zmienić przycisk do kotwicy i dodaj atrybut 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> 

Następnie zmieniać działania zmiennych do przechowywania tablicę obiektów:

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

wreszcie zmienić funkcję zmiany zaktualizować nazwę akcji i href

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

EDYTOWANIE Teraz z CodePen example. Zauważ, że zmieniłem przycisk na przycisk podziału (w przeciwnym razie href nie ma żadnego zastosowania, ponieważ zostałby zastąpiony przez przełącznik).

Answer 2

Cóż, jest kilka sposobów, aby to zrobić, zależy od tego, co robisz. Oto jeden przykład, jeśli masz wszelkie działania w zakresie w oddzielnym pliku, można zrobić coś podobnego do tego:

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