作成方法タイトルを変更するドロップダウンボタンのリンクが異なりますか？

Question

これまでは、クリックしたアイテムに応じてタイトルを変更するためのブートストラップ・ドロップダウン・ボタンを手に入れました。

Codepen

しかし、それ以外にも、私はそれらをクリックすると、すべてのドロップダウン項目は、独自のリンクを持っていると思います。

どうすればいいですか？

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> 

そして、オブジェクトの配列を保持する変数の行動を変える：

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

をアクション の名前を更新するために、変更機能を変更し、

EDIT今すぐ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)">