我对如何使用下拉菜单将用户重定向到另一个 View 感到有点困惑。这是我在 html 或 js 中更改的内容吗？
编辑:
在使用“MainController”之前，必须设置它所需的所有数据，因为它仅在 HTML 中通过占位符术语表示。 AngularJS 通过查看 HTML 并在 HTML 中查找“ng”前缀(例如“ng-model”和“ng-options”)来实现此目的。请记住，单词“template”和“templates”是 html 中的 id，它们直接绑定(bind)到 angularJS 标签。例如，您可以有 ng-model="foo"和ng-options="bar"
ng-model是一种数据绑定(bind)，它将 html 的值(文本、用户输入、用户选择的文本)绑定(bind)到应用程序数据(您在屏幕上看到的内容)。
$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 会将 html 注入(inject)带有 ng 前缀的标签中，并且它会像我们写出的那样呈现
<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>
以下是这两个函数实际用途的简要说明。
显示内容 = ng-model="template"
要显示的内容 = ng-options="t as t.name for t in templates"
$scope.templates 定义 ng-options ,
$scope.template 由 $scope.templates 内的对象数组定义，
“名称”是用户在给定下拉项上看到的内容，
“url”是被ng-app调用并注入(inject)到当前页面的html片段，
本地 html 文件的内容被注入(inject)到页面 <div ng-include='template.url'></div> ,
“controller”是 url 中找到的 html 的 Controller 名称，它也在 ng-app=app 的范围内。 ,
主 Controller 需要知道注入(inject)的 html 中 Controller 的名称来创建 2 路数据绑定(bind)。
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 加载完全不同的 Controller 。和MainController .
例如，$routeProvider可以附上controller: MakeGray_morecontrols它在标准 controller: MakeGray 上注入(inject)了更多按钮/控件
这是下拉操作的视频。
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
最佳答案
你有下拉菜单吗？
我会在 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"
}
};
关于javascript - 如何重定向到 SPA 中带有下拉菜单的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33955925/