Dynamically create Bootstrap Carousel with ng-repeat and base64 Images

Dynamically create Bootstrap Carousel with ng-repeat and base64 Images - angularjs

I am trying to dynamically fill an Bootstrap Carousel with Base64 Images. The Base64 string seems to be correct, because I validated it with the following converter, but the carousel doesn't render the image.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.imgBase64 = [" data:image/png;base64,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"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li ng-repeat="x in imgBase64 track by $index" data-target="#myCarousel" data-slide-to="{{$index}}" class="{$index==0:'active'}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img ng-src="x" alt="Los Angeles" ng-repeat="x in imgBase64 track by $index" class="{$index==0:'active'}">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

User have to create image from base64.
var image = new Image();
image.src = "data:image/png;base64..."
$scope.imgBase64 = image.src;

Related

Using Bootstrap Grid How to implement product carousel

using angularJs 1.6 and bootsrap3 grid i want to implement product card carousel slider without using any third party library is it possible please help me if anyone know friends
Left arrow <--- product-1-div product-2-div product-3 -->Rarrow
if i click right arrow next 3 product column should appear please friends help me!

angular.module('app', []).controller('ctrl', function($scope) {
$scope.products = []
for (var i = 0; i < 10; i++)
$scope.products.push({
name: 'Product' + i
})
})
.col-xs-4 {
height: 100px;
text-align: center;
border-right: 2px solid #5162d2;
}
li {
background-color: #5162d2 !important
}
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<body ng-app='app' ng-controller='ctrl'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="{{$index/3}}" ng-class="{active:$first}" ng-repeat='item in products' ng-if='$index%3==0'></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item" ng-class='{active:$first}' ng-repeat='item in products' ng-if='$index%3==0'>
<div class="row">
<div class="col-xs-4" ng-repeat='x in [0, 1, 2]'>{{products[$parent.$index+x].name}}</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>

Angular Slider code not changing slides

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>

Dynamically bind click event to button in template-url source

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

How to switch to a different view in angular JS on click?

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.

How to use a dropdown bar and ng-view

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");
}
};
});