Angularjs href in controller

Question

I was previous having 2 links where user can click and link them to another page, but now, I would like to have an option list where user can choose and link them as well. How can I achieve that? I was doing it previous by this method

<a ng-href="LINK" ng-click="getKML(selectedTheme)" target="_blank" download>KML</a>
<a ng-href="LINK" ng-click="getSHP(selectedTheme)" target="_blank" download>KML</a>

But now, I would like to have an option list to do the same thing, how can I achieve that?

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope, $mdDialog) {
        $scope.downloadFormat = ["a", "b"];
    });

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <title>angular Js Modal popup</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <link rel='stylesheet' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
      <link rel='stylesheet' href='https://material.angularjs.org/1.1.1/docs.css'>
      <link rel="stylesheet" href="css/style.css">
  </head>

  <body ng-controller="AppCtrl" ng-app="MyApp">
      <select ng-model="selectedFormat" ng-options="x for x in downloadFormat">
      </select>
      <button ng-click="lalalu(selectedFormat)">Download</button>
      <!--
                      Copyright 2016 Google Inc. All Rights Reserved.
                      Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at https://material.angularjs.org/HEAD/license.
  -->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
      <script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>
      <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
      <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
      <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
      <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
      <script src="js/index.js"></script>
  </body>

</html>

Stackblitz or any code example?

Prashant Pimpale
– Prashant Pimpale

2018-11-16 06:05:28 +00:00
Commented Nov 16, 2018 at 6:05 — Prashant Pimpale
– Prashant Pimpale, Commented Nov 16, 2018 at 6:05
@PrashantPimpale i added a snippet

ITnyp
– ITnyp

2018-11-16 06:19:14 +00:00
Commented Nov 16, 2018 at 6:19 — ITnyp
– ITnyp, Commented Nov 16, 2018 at 6:19

amrender singh · Accepted Answer · 2018-11-16 06:21:18Z

You can use $location service to achieve this, you can redirect your user to other website using this service. Please refer to the plunker below, select a link from the dropdown and it redirect you to that website :

var app = angular.module('main',[]);
app.controller('myctrl', function($scope, $location, $window){
  $scope.downloadFormat = ["https://code.angularjs.org/1.2.18/docs/"];
  $scope.redirectToSite =  function(site){
    if($scope.$$phase) { // check is digest cycle is already running
        $window.location.href = site;
    } else {
        $location.url(site);
        $scope.$apply();
    }
   };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<div ng-app="main">
  <div ng-controller="myctrl">
    <select ng-model="selectedFormat" ng-options="x for x in downloadFormat">
    </select>
    <button ng-click="redirectToSite(selectedFormat)">Redirect</button>
  </div>
 </div>

Collectives™ on Stack Overflow

Angularjs href in controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related