Question

我以前有2个链接，用户可以单击并链接到另一个页面，但是现在，我希望有一个选项列表，用户也可以选择和链接它们。我该如何实现？我以前是用这种方法做的

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

但是现在，我希望有一个选项列表来做同样的事情，我该如何实现？

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>

Answer 1

您可以使用$ location服务来实现此目的，也可以使用此服务将用户重定向到其他网站。请参考下面的插件，从下拉列表中选择一个链接，它将您重定向到该网站：

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>

控制器中的AngularJS href

1 个答案: