Question

我希望在angular selectpicker中点击时，可以选择菜单来引用某个页面。我怎么能这样做？

我试过这样的事，但无济于事

<option><a href="">First Option</a></option>

这里是Codepen沙箱。

HTML

<html ng-app="selectDemoApp"> 
<body>
  <div role="main">
    <div class="container">
      <section ng-controller="SelectCtrl">
        <div class="page-header">

          <select class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
          </select>

        </div>
      </section>
    </div>
  </div>
</body>
</html>

JS

angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);

function SelectCtrl($scope) {
  $scope.form = undefined;
}

Answer 1

试试这种方式

<select class="selectpicker" ng-model="changeState" ng-change="change(changeState)">
    <option value="https://google.com">Mustard</a>
    </option>
    <option value="/2.html">Ketchup</a>
    </option>
    <option value="/3.html">Relish</a>
    </option>
  </select>

在您的控制器中

$scope.change = function(url){
  window.open('url');
}

希望你能有一个想法来实现你的目标..

Answer 2

您可以使用其他逻辑来执行重定向。

请参阅您自己的Codepen。

这是执行重定向的控制器：

查看：

 <select class="selectpicker" ng-model="choice" ng-change="redirect()">
            <option value="/1.html">Mustard</a></option>
            <option value="/2.html">Ketchup</a></option>
            <option value="/3.html">Relish</a></option>
 </select>

CONTROLLER：

 $scope.redirect = function()
  {
    var landingUrl = "http://" + $window.location.host +  $scope.choice;

    $window.location.href = landingUrl;
  }

Answer 3

以下是使用您的解决方案更新的codepen .. http://codepen.io/anon/pen/qOxgJz

<select class="selectpicker" ng-change="onSelectChange()" ng-model="selectedValue">
    <option>Mustard</a></option>
    <option>Ketchup</a></option>
    <option>Relish</a></option>
</select>

var selectDemoApp = angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
selectDemoApp.controller('SelectCtrl', ['$scope', '$window',
  function($scope, $window) {
      $scope.onSelectChange = function(){       
        if($scope.selectedValue === 'Mustard'){
           $window.open("www.google.com");
        } else if($scope.selectedValue === 'Ketchup'){
           $window.open("www.facebook.com");
        } else if($scope.selectedValue === 'Relish'){
           $window.open("2.html");
        }
      }
  }
]);

如何添加指向selectpicker项目的链接？

3 个答案: