how to create a drop down redirect page using angular JS

Question

I would like to create a drop down redirect page in angular JS. Where in when a user selects the drop down and then clicks Go button he is directed to the page.

below is the angularJS script, with a little Javescript and the Html page.

//Angular JS
function TheController($scope) {

    $scope.locations = [
        {LocationId : "http://www.google.com/", LocationName : 'Philippines' },       
        {LocationId : " http://www.yahoo.com/" , LocationName : 'Canada' },
        {LocationId : " http://www.bing.com/", LocationName : 'China' } ];

    function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }

 }

//Html
<form name="dropdown">

<div ng-controller="TheController" ng-app>


Another Location:    
<select ng-model="anotherLocationId" onchange="goToPage(this.options(this.selectedIndex).value)" >
    <option ng-repeat="location in locations" value="{{location.LocationId}}">{{location.LocationName}}</option>
</select>    

    <hr/>


    Another Location: {{anotherLocationId}}


</div>

<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
    </form>

your code looks good to me. except it will open a new window instead of redirecting. Are you getting an error? — Matt Bodily, Feb 26 '15 at 19:56
I want it to redirect to another page and the Url is actually dynamic not static. for example : http:// www.google.com/i30005w2w7w and http:// www.google.com/i30a45w0000035 .So it should fetch the id and directly link to another page when the user clicks the drop down name. — DominicSeb, Feb 26 '15 at 20:16

score 0 · Accepted Answer · edited May 23 '17 at 12:28

your code to me looks like it will work but will open a new window instead of redirecting. from Here what you need to do is replace

window.open

with

window.location.href = $scope.anotherLocationId;

I am fairly new to angular but my understanding is the selected item in the dropdown will be put in the ng-model variable. window.location will redirect instead of opening a new window.

how to create a drop down redirect page using angular JS

1 Answers1