How to make the Dropdown button, which changes the name, has different links?

Question

So far, I have managed to get the bootstrap upload button to change its name depending on the selected item.

Codepen

But also, I want each item in the drop-down list to have its own link when clicking on them.

How can i do this?

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

Do something like this using ng-href

First change the button to the anchor and add the ng-href attribute;

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

Then change the actions variable to store an array of objects:

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

Then finally change the change function to update the action name and href

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

EDIT Now with the CodePen example . Please note that I changed the button to a split button (otherwise href will not be used at all, because it will be overwritten by the switch).

Answer 2

Well, there are several ways to do this, depending on what you are doing. Here is one example: if you have all the actions in the area in a separate file, you can do something similar to this:

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