Başlığını değiştiren açılır düğme nasıl farklı bağlantılar içerir?

Question

Şimdiye kadar, tıklanan öğeye bağlı olarak başlığını değiştirmek için bootstrap açılır düğmesini almayı başardım.

Codepen

Ama bunun yanı sıra

ben onlara tıklandığında her açılır öğenin kendi bağlantısını yapmak istiyorum.

Bunu nasıl yapabilirim?

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

böyle bir şey yapın ve ng-href özniteliğini ekleyin;

<a href ng-href="{{ href }}" id="single-button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled"> 
    {{ name }} <span class="caret"></span> 
</a> 

Sonra nesneleri dizisini tutmak için değişken eylemleri değiştirmek:

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

Sonunda eylem ve href

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

adını güncellemek için değişiklik işlevini değiştirebilir

EDIT Şimdi bir CodePen example ile. Düğmeyi bölünmüş bir düğmeye değiştirdiğimi unutmayın (aksi halde, href'in hiç bir kullanımı yoktur, çünkü geçişin üzerine yazılır).

Answer 2

Peki, orada Bunu yapmak için birkaç yol var ne yaptığınızı bağlıdır. Burada ayrı bir dosyaya kapsamında her eylemi varsa, buna benzer bir şeyler yapabiliriz, bir örnek: ng-href

İlk çapa için düğmeye değiştirmek kullanarak,

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