Question

我对如何使用下拉菜单将用户重定向到另一个视图感到有点困惑。这会是我在html或js中改变的吗？

编辑：

在主控制器之前＆＃39;如果可以使用，则必须设置它所需的所有数据，因为它仅通过占位符术语以HTML表示。 AngularJS通过查看HTML并查找＆＃39; ng＆＃39;前缀如＆＃39; ng-model＆＃39;和＆＃39; ng-options＆＃39;在你的HTML中。请记住，单词＆＃39;模板＆＃39;和＆＃39;模板＆＃39;你的html中的id直接绑定到angularJS标记。例如，您可以ng-model="foo"和ng-options="bar"

ng-model是一个数据绑定，它将html（文本，用户输入，选择的文本用户）的值绑定到应用程序数据（您在屏幕上看到的内容）。

$ scope是应用程序本身，可以访问页面上的所有html和js，这通常是正确的，因为ng-app通常放在页面的根元素中<html ng-app="app">

有了这个，我就可以开始解释这一切如何与下拉菜单联系起来了！

在我们的例子中，我们看到我们的下拉菜单元素包含

ng-model="template"

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

和一个名为form-control的引导类。我们的下拉菜单的元素将存储在angularJS对象数组中，而不是html本身。当网站加载时，我们的angularJS会在带有ng前缀的标签中注入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"

要显示的东西= ng-options="t as t.name for t in templates"

$ scope.templates定义ng-options，

$ scope.template由$ scope.templates，

中的一组对象定义

＆＃34;名称＆＃34;是用户在给定的下拉列表中看到的内容，

＆＃34; URL＆＃34;是由ng-app调用并注入当前页面的html片段，

本地html文件的内容被注入到<div ng-include='template.url'></div>行的页面中，

＆＃34;控制器＆＃34;是在url中找到的html的控制器名称，也在ng-app=app的范围内，

主控制器需要知道注入的html内部控制器的名称，以创建双向数据绑定。

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

JS

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

Answer 1

你有下拉菜单吗？

我会在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"
    }

};

如何通过SPA中的下拉菜单重定向到页面？

1 个答案: