I have a website with a bootstrap carousel, showing 4 photos in every slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
</div>
I want to get the photos from database using angularjs. ng-repeat on item will fix the problem, but it will get 50 photos.
How can i put every 4 photos/50 in every slide. Any help?
You can use groupBy filter, also you should add helper property: index: Math.floor(i / 4) to your images.
angular.module('app', ['angular.filter'])
.controller('MyController', ['$scope', function($scope) {
$scope.images = [];
for(var i = 0; i < 50; i++)
$scope.images.push({url:'url' + i, index: Math.floor(i / 4)});
}]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<body ng-app="app">
<div ng-controller="MyController">
<div class="carousel-inner">
<div class="item" ng-class='{active: $first}' ng-repeat="(key, value) in images | groupBy: 'index'">
<div class="row">
<div class="col-sm-3" ng-repeat="image in value">
{{image.url}}
</div>
</div>
<br/>
</div>
</div>
</div>
</body>
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 have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
I have the next code in Html and AngularJS:
<div class='row'>
<div class='col-md-6' ng-repeat='post in news'>
<div class='post-content'>{{ post.title }}</div>
</div>
</div>
Now, what I need is to push a row with two columns every four posts.
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
How do I do it in AngularJS?
The DOM result what I'm looking for is:
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
...
essentially you need to be using the built in $index which keeps track on the index it is currently on. Every fourth item implies it should be divisible by four. You also need an ng-if statement to determine wether a dom snippet should be added on said item. Also this calls for the use of the ng-repeat-start instead of ng-repeat. Its seldom used but for this purpose it should work. Code below :
<div class='row' ng-repeat-start="post in news" >
<div class='post-content'>{{ post.title }}</div>
</div>
<div class="row" ng-repeat-end ng-if="($index +1 ) % 4 === 0" >
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
Can any body tell me how to display dygraph in listview using json response.
Here is my response from which i need to make dygraph..i goggled about it but its did'nt get any clue about it.
http://piratepad.net/ep/pad/view/ro.y8PksMhLIhk/latest
this is how i am doing :-
In My Index.html :-
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/dygraph-combined-dev.js"></script>
<script src="js/dygraph-combined.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
In My Home.html :-
<div ng-repeat="entry in listnew">
<div class="bar bar-dark bar-head">
<h2>Basestation {{entry.baseID}} {{entry.nickname}}</h2>
</div>
<ion-list>
<div ng-repeat="scout in entry.scouts">
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout)"
ng-class="{active: isGroupShown(scout)}" ng-init="showGraph(scout.tempHistory)">
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div id=graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
</div>
In my controller.js :-
$scope.showGraph = function(data) {
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
data, {
// options go here. See http://dygraphs.com/options.html
legend : 'always',
animatedZooms : true,
title : 'dygraphs chart template'
});
};
Here data is which i displayed in pirate-pad.
The problem is I am getting dygraph only at first item but not on remaining.
Here you go :-
In Your Controller.js Define :-
$scope.graphs = [
{
data : data(Place your JavaScript Array here),
},
];
})
.directive(
'graph',
function() {
return {
restrict : 'E',
scope : {
data : '=',
opts : '='
},
template : '<div class="graph"></div><div class="labels"></div>',
link : function(scope, elem, attrs) {
var graph = new Dygraph(elem.children()[0],
scope.data, scope.opts);
}
};
});
In your Home.html define :-
<ion-list>
<div ng-repeat="scout in entry.scouts" >
<div class="wrap_home">
<ion-item class="item-accordion" ng-click="toggleGroup(scout,scout.tempHistory)"
ng-class="{active: isGroupShown(scout)}" >
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{scout.moduleID}}</b>
</div>
</div>
<div class="col col-25">
<div class="top_spc">{{scout.nickname}}</div>
</div>
<div class="col col-20">
<div class="top_spc temp_mid">
{{scout.temperature}}<sup>o</sup>C
</div>
</div>
<div class="col">
<div class="batt_icon ">
<img src="img/battery.png" alt="battery" />
</div>
</div>
<div class="col">
<div ng-if="scout.power=='0'">
<div class="plug_icon red">
<img src="img/plug.png" alt="plug" />
</div>
</div>
<div ng-if="scout.power=='1'">
<div class="plug_icon">
<img src="img/plug.png" alt="plug" />
</div>
</div>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(scout)">
<div class="sub_detail">
<div class="row">
<div class="col col-50">
<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}
min ago)</span>
</div>
<div class="col col-50">{{scout.tempLow}}(L),
{{scout.tempHigh}}(A), {{scout.tempAvrg}} (Avg)</div>
</div>
<div >
<graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
Dygraph have some problem with ng-repeat As I read in the link given bellow :-
Dygraphs not working with ng-repeat