如何在SPA中使用下拉菜單重定向到頁面？

我對於如何使用下拉菜單將用戶重定向到另一個視圖有點難堪。這是我改變的HTML或JS？如何在SPA中使用下拉菜單重定向到頁面？

編輯：

的「MainController」以前可以使用，所有它要求必須設置，因爲它是由HTML佔位符方面僅表示的數據的。 AngularJS通過查看HTML並在您的HTML中找到'ng'前綴（如'ng-model'和'ng-options'）來實現這一點。請記住，「模板」和「模板」這兩個詞在您的html中直接與angularJS標籤綁定。例如，你可以有ng-model="foo"和ng-options="bar"

ng-model是一個數據綁定結合的HTML（文本，用戶輸入文本用戶選擇）的值，以應用數據（你在屏幕上看到的內容）。

$範圍是應用程序本身，並已獲得所有HTML和JS的頁面，因爲NG-應用程序通常放置在頁面的根元素<html ng-app="app">

有了這樣的通常是真實的方法，我可以開始解釋如何將這一切聯繫到一個下拉菜單！

在我們的例子中，我們看到，我們的下拉菜單中選擇元素包含

ng-model="template"

ng-options="t as t.name for t in templates"

，並呼籲form-control自舉類。我們的下拉菜單中的元素將存儲在一個angularJS對象數組中，而不是html本身。當網站負載，我們angularJS將注入的HTML標籤與納克前綴，它將使我們彷彿寫出來

<select class="form-control" id="foo"> 
    <option>bar1</option> 
    <option>bar2</option> 
    <option>bar3</option> 
    <option>bar4</option> 
</select>

這是由angularJS，如下表示。

<select id="form_filter" class="form-control" 
       ng-model="template" 
       ng-options="t as t.name for t in templates"> 
</select>

下面簡要說明這兩個實際做了什麼。

DISPLAYS STUFF = ng-model="template"

STUFF要顯示= ng-options="t as t.name for t in templates"

$ scope.templates限定ng-options，

$ scope.template通過內部$範圍對象的數組定義。模板，

「名」是用戶所看到的在一個給定的下拉菜單項，

「URL」是獲取由NG-應用程序調用，並注入到當前頁面的HTML片段，

地方HTML文件的內容被注入到頁面上線<div ng-include='template.url'></div>，

「控制器」是控制器在URL中發現的HTML的名字，這也是ng-app=app範圍內，

主要對照oller需要知道注入的html內部的控制器的名稱以創建2路數據綁定。

app.config(["$routeProvider", function($routeProvider){ // This attaches the controller with the corresponding html that the user selects 
    $routeProvider. 
    when("../opencv/MakeGray/MakeGray.html",{ 
     controller: "MakeGray" 
    }). 
    when("../opencv/Canny/Canny.html",{ 
     controller: "Canny" 
    }); 

}]);

最後這使得一些圖像處理的情況發生。

mainController passes an image to the template.controller template.controller processes the base64 string image and posts it

雖然這是一個有點多餘，記住，你可以有完全不同的控制器通過$routeProvider和MainController加載。

例如，$routeProvider可以附加controller: MakeGray_morecontrols其超過標準controller: MakeGray

注入更多的按鈕/控制這裏的下降動作下來的視頻。

https://www.youtube.com/watch?v=JwDSwzqi1Co

app.controller('MainController',['$scope', '$http', 'API', function($scope, $http, API){ 
    $scope.imageUrl = ""; 

    $scope.template = ""; 
    $scope.templates =[ 

    {name: 'select an option...'}, 
    {name: 'MakeGray', url:'../opencv/MakeGray/MakeGray.html', controller: "MakeGray"}, 
    {name: 'Canny', url:'../opencv/Canny/Canny.html', controller: "Canny"}, 

    ];  

    $scope.template = $scope.templates[0]; 

    // DISPLAY PROCESSED 

    // UPLOAD IMAEGS : if upload button is pushed image is shown to user and image is uploaded to server for use 
    $scope.UploadFile = function() 
    { 
    var form_img = document.getElementById('form_img').files[0]; // name of image 
    var form_filter = document.getElementById('form_filter').value; 

    if (form_img.size < 20000000) //2mb 
    { 
     if (
     form_img.type === "image/jpeg" ||  // Add image or video types as needed 
     form_img.type === "image/jpg" || 
      form_img.type === "image/png" || 
      form_img.type === "image/bmp" ) 
     { 

     var ReadImage = new FileReader(); 
     ReadImage.onloadend = function(Image) 
     { 

      var img  = Image.target.result; // convert image from user to base64 
      var imgsize = Image.total;    
      var imgname = Math.random() + "_" + form_img.name; // create unique id 

      var filter = form_filter; 
      var formData = new FormData(); 

      $("#img1").prop("src", img); // Display image 

      formData.append("img", img); 
      formData.append("imgsize", imgsize); 
      formData.append("imgname", imgname); 
      formData.append("filter", filter); 

      API.uploadImage(formData) 
      .success(function (imgUrl) 
       { 
        $scope.imageUrl = imgname; 
       }) 
      .error (function (error){}); 

     } 
     ReadImage.readAsDataURL(form_img); 
     } 
     else {alert("FILE IS NOT AN IMAGE");} 
    } 
    else {alert("IMAGE IS TOO LARGE");} 
    } 

}]);

HTML

<body ng-controller="MainController"> 

    <div class="row"> 

     <div class="col-md-20"> 
    <div id="main"> 
     <form class="form-horizontal" role="form"> 
     <label class="control-label col-md-2">Filter List:</label> 
     <div class="col-md-5"> 

      <select id="form_filter" class="form-control" 
       ng-model="template" 
       ng-options="t as t.name for t in templates"> 
      </select> 

     </div> 
     </form> 
    </div> 
     </div> 
    <!-- rest of the page ..............--> 
</body

來源

2015-11-27 Zypps987

你有一個下拉菜單？

我想創建一個在HTML：

<select ng-options="filter for filters in filters" 
        ng-model="filter" 
        ng-change="letsGoToANewPage(filter)"> 
<option value="">Select Option</option> 
</select>

和你的JavaScript：

$scope.letsGoToANewPage = function(filter){ 

    if(filter === "Canny"){ 
    window.location.href = "http://mywebsite.com" 
    } 

};

來源

2015-11-27 11:19:00 xeon48

感謝您的答覆！是的，我應該提到我確實有一個下拉菜單工作，但目前它什麼都不做。我會嘗試你的建議和報告！ – Zypps987

Ok working - http://plnkr.co/edit/AwBLvJsAQe4DEGHezPd2?p=preview – xeon48

我已將'window.location.href =「http://www.google.com」'\t更改爲'window.open（「http://www.google.com」，「_blank」，「height = 400，width = 700」）;'，因爲plunkr不允許在內部打開外部網站，所以我不得不使其成爲一個彈出窗口。如果你想要一個元素在你的下拉菜單下面顯示一個網頁 - http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript。我也做了一些改變，你如何在script.js中聲明你的「app」和「controller」，這是你的主要問題 – xeon48

如何在SPA中使用下拉菜單重定向到頁面？

回答

相關問題