I'm somewhat stumped as to how I would redirect the user to another view using the dropdown menu. Would this be something I change in the html or the js?
EDIT :
Before the 'MainController' can be used, all of the data that it requires must be set since it is only represented in HTML by placeholder terms. AngularJS does this by looking through the HTML and finding 'ng' prefixes such as 'ng-model' and 'ng-options' in your HTML. Remember, the word 'template' and 'templates' are ids in your html that are directly tied to an angularJS tag. For instance you could have ng-model="foo" and ng-options="bar"
ng-model is a data binding that binds the value of html (text, user input, text user selected) to application data (the stuff you see on screen).
$scope is the application itself and has access to all html and js on the page, which is usually true because ng-app is usually placed in the root element of the page <html ng-app="app">
With that out of the way, I can start explaining how this all ties into a dropdown menu!
In our case we see that our dropdown menu element contains
ng-model="template"
ng-options="t as t.name for t in templates"
and a bootstrap class called form-control. The elements for our dropdown menu will be stored inside an angularJS array of objects instead of the html itself. When the website loads, our angularJS will inject the html in the tags with ng prefixes and it will render as if we had written out
<select class="form-control" id="foo">
<option>bar1</option>
<option>bar2</option>
<option>bar3</option>
<option>bar4</option>
</select>
which is represented by angularJS as the following.
<select id="form_filter" class="form-control"
ng-model="template"
ng-options="t as t.name for t in templates">
</select>
Here's a brief explanation of what these 2 actually do.
DISPLAYS STUFF = ng-model="template"
STUFF TO BE DISPLAYED = ng-options="t as t.name for t in templates"
$scope.templates defines ng-options,
$scope.template defined by an array of objects inside $scope.templates,
"name" is what the user sees on a given dropdown item,
"url" is the html fragment that gets called by ng-app and injected into the current page,
local html file's contents gets injected into the page on line <div ng-include='template.url'></div>,
"controller" is the name of the controller for the html found in url, that is also inside the scope of ng-app=app,
The main controller needs to know what the name of the controller inside the injected html to create a 2 way data-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"
});
}]);
Finally this allows some image processing to happen.
mainController passes an image to the template.controller
template.controller processes the base64 string image and posts it
While this is a bit redundant, keep in mind that you can have completely different controllers be loaded by $routeProvider and MainController.
For example, the $routeProvider could attach controller: MakeGray_morecontrols which injects more buttons / controls over the standard controller: MakeGray
Here's a video of the drop down in action.
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
