CODEWITHSUNDEEP
javascriptangularjs
ITnyp
ITnyp

Reputation: 107

Angularjs href in controller

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>

Upvotes: 1

Views: 2268

Answers (1)

amrender singh
amrender singh

Reputation: 8239

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>

Upvotes: 1

Related Questions