I have a requirement where I have two buttons:
A and B
A has 3 tabs associated with it- a,aa and aaa
B has 3 tabs associated with it- b,bb and bbb
The page should initially load with A active(css class will be different for the active button) and 'a' tab active.
When I click B button, B becomes the active button and it should hide all the tabs associated with A and show only tabs associated with B.
When I click A button, A becomes the active button and it should hide all the tabs associated with B and show only tabs associated with A.
Basically at any point of time, there should be only 3 tabs visible.
I have been trying to do this using ng-show directive of angularjs. I tried ng-hide also with no luck.
Here is the plunker.
The button events are getting hit every time and the ng-show scope variable is also getting updated. But the tabs just dont hide.
<!DOCTYPE html>
<html ng-app="aaabbb">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="main" ng-controller="mainController" >
<div class="container">
<div class="row">
<form>
<div class="form-group ">
<div class="container">
<div class="row text-center">
<div ng-controller="mainController">
<input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
<input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
</div>
</div>
</div>
</div>
</form>
</div>
<div ng-controller="mainController">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
<li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
<li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
<li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
<li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
<li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
</ul>
</div>
<div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>
<div class="tab-pane fade in active" id="a" ng-show='a'>
<p>a content</p>
</div>
<div class="tab-pane fade" id="aa" ng-show='a'>
<p>aa content</p>
</div>
<div class="tab-pane fade" id="aaa" ng-show='a'>
<p>aaa content</p>
</div>
</div>
<div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>
<div class="tab-pane fade in active" id="b" ng-show='b'>
<p>b content</p>
</div>
<div class="tab-pane fade" id="bb" ng-show='b'>
<p>bb content</p>
</div>
<div class="tab-pane fade" id="bbb" ng-show='b'>
<p>bbb content</p>
</div>
</div>
</div>
function mainController($scope, $http) {
$scope.a=true;
$scope.b=false;
$scope.aSelect = function(){
$scope.aselected=true;
$scope.bselected=false;
$scope.a=true;
$scope.b=false;
}
$scope.bSelect = function(){
$scope.aselected=false;
$scope.bselected=true;
$scope.a=false;
$scope.b=true;
}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var target = $(e.target).attr("href");
if(target=='#a'){
//reload the content from the web service
}
else if (target == '#aa') {
//reload the content from the web service
} else if (target == '#aaa') {
//reload the content from the web service
} else if (target == '#b') {
//reload the content from the web service
} else if (target == "#bb") {
//reload the content from the web service
} else if (target == "#bbb") {
//reload the content from the web service
}
});
}
Working plunker: https://plnkr.co/edit/XSoHry?p=preview
You have a lot of miscellaneous issues. For one, there are several ng-controller directives when there should only be one:
<body id="main" ng-controller="mainController" >
...
<div ng-controller="mainController">
...
<div id="atabcontent" class="tab-content" ng-controller="mainController" ng-show='a'>
...
<div id="btabcontent" class="tab-content" ng-controller="mainController" ng-show='b'>
You are creating a new instance of the controller each time you do that which creates a new scope, which is guaranteed to cause you problems. You only need one instance of the controller.
There is no call to start the angular app. You need, at minimum, this:
angular.module('aaabbb', [])
.controller('mainController', mainController);
Run below html and angular js code.
Error in your code:
1. Change the link of 1st script tag as mentioned in below code.
2. Angular module = aaabbb is not defined. that is included in below code.
3. Attach the controller to angular module.
4. Their should be only one ng-controller in body tag.
// Code goes here
// module name aaabbb is attached to angular.
var app = angular.module("aaabbb",[]);
var mainController = function($scope, $http) {
$scope.a=true;
$scope.b=false;
$scope.aSelect = function(){
$scope.aselected=true;
$scope.bselected=false;
$scope.a=true;
$scope.b=false;
}
$scope.bSelect = function(){
$scope.aselected=false;
$scope.bselected=true;
$scope.a=false;
$scope.b=true;
}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var target = $(e.target).attr("href");
if(target=='#a'){
//reload the content from the web service
}
else if (target == '#aa') {
//reload the content from the web service
} else if (target == '#aaa') {
//reload the content from the web service
} else if (target == '#b') {
//reload the content from the web service
} else if (target == "#bb") {
//reload the content from the web service
} else if (target == "#bbb") {
//reload the content from the web service
}
});
};
// mainController is attached to angular module.
app.controller("mainController",mainController);
<!DOCTYPE html>
<html ng-app="aaabbb">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="main" ng-controller="mainController" >
<div class="container">
<div class="row">
<form>
<div class="form-group ">
<div class="container">
<div class="row text-center">
<div>
<input type="button" value="a" ng-class="{'btn btn-primary': aselected}" ng-click="aSelect()" />
<input type="button" value="b" ng-class="{'btn btn-primary': bselected}" ng-click="bSelect()" />
</div>
</div>
</div>
</div>
</form>
</div>
<div>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#a" data-toggle="tab" ng-show='a'>a</a></li>
<li><a href="#aa" data-toggle="tab" ng-show='a'>aa</a></li>
<li><a href="#aaa" data-toggle="tab" ng-show='a'>aaa</a></li>
<li><a href="#b" data-toggle="tab" ng-show='b'>b</a></li>
<li><a href="#bb" data-toggle="tab" ng-show='b'>bb</a></li>
<li><a href="#bbb" data-toggle="tab" ng-show='b'>bbb</a></li>
</ul>
</div>
<div id="atabcontent" class="tab-content" ng-show='a'>
<div class="tab-pane fade in active" id="a" ng-show='a'>
<p>a content</p>
</div>
<div class="tab-pane fade" id="aa" ng-show='a'>
<p>aa content</p>
</div>
<div class="tab-pane fade" id="aaa" ng-show='a'>
<p>aaa content</p>
</div>
</div>
<div id="btabcontent" class="tab-content" ng-show='b'>
<div class="tab-pane fade in active" id="b" ng-show='b'>
<p>b content</p>
</div>
<div class="tab-pane fade" id="bb" ng-show='b'>
<p>bb content</p>
</div>
<div class="tab-pane fade" id="bbb" ng-show='b'>
<p>bbb content</p>
</div>
</div>
</div>
</body>
</html>
Related
I am using a bootstrap slider using the HTML code and CSS.
BUt the slides are not changing automatically or manually.
below is the code of slider.
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3>
<h4 data-animation="animated bounceInUp">Easily use stunning effects</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3>
<h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3>
<h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">We are creative</h3>
<h4 data-animation="animated bounceInUp">Get start your next awesome project</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!doctype html>
<html ng-app="plunker" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"> </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="app.js"></script>
<!-- adding css files -->
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="CarouselCtrl">
<div class="offsetspan6">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img class="image-circle" ng-src="{{slide.image}}" style="margin:auto;"/>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//angular.module('myApp', ['ui.bootstrap']);
var app = angular.module('plunker', ['ui.bootstrap']);
// Controller for Carousel
function CarouselCtrl($scope) {
// initializing the time Interval
$scope.myInterval = 1000;
// Initializing slide rray
$scope.slides = [
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Cute Fish'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image2'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Swordtail%20PIX/Xiphophorus%20helleriAQ%20Hifin%20Black%20males.jpg',text:'Image3'},
{image:'http://www.wetwebmedia.com/fwsubwebindex/Cyprinodontiform%20PIX/Platy%20PIX/Xiphophorus%20maculatusAQ%20Neon%20female.jpg',text:'Image4'}
];
var slides = $scope.slides;
console.log(slides);
} // Controller Ends here
</script>
</html>
I am using ui-bootstrap angularjs for generating slide down's and added a button and click event, with alert message in controller but I don't get any alert or console log.
I am facing problem in generating alert on click of button which is being loaded using template-url as you can see in code below. I am sharing my sample code below.
angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
console.log("CTRL LOADED");
$scope.alertMsg = function(){
alert('hejd');
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
</uib-accordion>
</div>
</body>
</html>
I do get the log "CTRL LOADED". But I am not getting alert message when I click.
I believe the panel creates its own scope so you need to call the parent scope to get the alert message like so:
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<button ng-click="$parent.alertMsg()">Btn</button>
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
Here is a Plunker
I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>
You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>
You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample
You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);
Hello I was wondering how I would go about switching to a different view on user click in a dropdown menu?
When I select the "Canny" option in the dropdown, everything at and above the dropdown menu stays the same. The part below it are filled with things related to the Canny and displayed as such.
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<div class="row"> <!-- Dropdown menu -->
<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 class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
the angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["Canny", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "Canny"){
window.open("pages/MakeGray.html", "_blank", "height = 400, width = 700");
}
};
});
Currently I have it opening a new window and going to google.com the page's name is Canny.html in my folder containing all the source code.
I've looked at ng-view according to
https://docs.angularjs.org/api/ngRoute/directive/ngView
However, I'm very unsure as to how I would incorporate the above with the dropdown menu.
Here's a few screenshots showing what the website currently looks like for reference.
imgur.com/a/NUVEe
Here's the code
index.html
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<ng-view>
<div class="row"> <!-- Dropdown menu -->
<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 class="form-control"
ng-options="filter for filter in filters"
ng-model="filter"
ng-change="GoToOpenCVpage(filter)">
<option value=""> Select Filter</option>
</select>
</div>
</form>
</div>
</div>
</div>
</ng-view>
<div id = "content"> <!-- stuff showing opencv filter goes in here -->
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
makegray.html (the html content I want to inject into index.html)
<html ng-app="app">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body ng-controller="MainController">
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> MAKE GRAY</a>
</div>
</div>
</nav>
<form action="../php/makegray.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angularJS
var app = angular.module("app", ["ui.bootstrap"]);
/*app.factory("API", function($http) {
return {
getFilters: function(callback) {
$http.get("filters.php").success(callback);
}
}
});*/
app.controller("MainController", function($scope) {
$scope.ListOfOpenCV = {}; // declare array
// $scope.ListOfOpenCV.filter = "";
$scope.filters = ["MakeGray", "Sobel"];
//$scope.ListOfOpenCV.filter = $scope.filters[0];
$scope.GoToOpenCVpage = function(filter){
if(filter === "MakeGray"){
// window.location("pages/Canny.html");
window.open("pages/MakeGray.html", "_blank","height = 400, width = 700");
}
};
});