I have a page displaying 3 images in a row, using Ng-repeat, but no matter which image I click, I only see the image of the FIRST image displayed in that specific row.
Template:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 1 < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 2 < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
</div>
</div>
ng-click function:
$scope.seeOne = function (image) {
window.localStorage['fbid'] = image.fbid;
$state.go('app.oneimg');
}
$scope.images:
angular.forEach(value, function (value, key) {
if (key == 'photo') {
$scope.images.push({
id: i,
fbid: inventorykey,
src: ("data:image/jpeg;base64," + value)
});
i = i + 1;
}
})
You're repeating <div ng-click="seeOne(image)"> 3 times in this example, where image only refers to the first one of the 3 images you're displaying. If you change that line to match the <img> tag beneath it, you get the result you're looking for. Something like this:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(images[$index])">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 1 < images.length">
<div ng-click="seeOne(images[$index+1])">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
</div>
<div class="col col-33" ng-if="$index + 2 < images.length">
<div ng-click="seeOne(images[$index+2])">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
</div>
</div>
{{images[$index].src}} is wrong. use {{image.src}} instead.
The $index will change at each iteration, but there is only one variable. so at the end of the rendering all images will be the same as the refer to the same index. it doesn't matter what was the value when the page is rendered. It matters whats the value at the end of the angular digest phase.
To achieve your use case you need to set and use a local variable into the ng-repeat scope:
<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0" ng-init="myIndex = $index">
<div class="col col-33" ng-if="$index < images.length">
<div ng-click="seeOne(image)">
<img ng-src="{{images[myIndex].src}}" width="100%" />
</div>
</div>
Alternative: Put the data in the proper structure (an 2d array) and use nested ng-repeat - makes your life much easier
Related
I am using Dragula with Angular7 and dragula is not updating the list sorting even after drag and drop event successfully emitted.
Here, is my code :
dragula.view.html
<div class="portlet-content doc-portlet">
<div dragula="one-bag" [(dragulaModel)]="fileList" (dragulaModelChange)="fileList = $event">
<div class="elementline " *ngFor="let item of fileList">
<div class="extra-pages-portlet-content">
<div class="thumb-box left-col">
<a href="{{item.file_url}}{{item.file}}" target="_blank">
<img [src]="item.complete_url" height="100%" width="100%">
</a>
</div>
<div class="right-col thumb-info">
<div class="icon-row">
<div class="icon" style="float:right;">
<span style="cursor:grabbing; float:right;">
<img src="../../assets/images/move.png" height="16" width="16" class="iconDelete-update">
</span>
</div>
</div>
<div class="text-and-input-field">
<span class="text-detail-portlet" style="float:left;">Seconden: </span>
<div class="input-field">
<input type="text" [(ngModel)]="item.slide_duration" class="text-right-Detail-user" placeholder="-" style="width:100%; text-align:right;">
</div>
</div>
</div>
</div>
</div>
</div>
dragula.component.ts
dragulaService.setOptions('one-bag', {})
dragulaService.drop.subscribe((value:any) => {
var counter = 0;
for(var j=0; j < this.fileList.length;j++) {
this.fileList[j].narrowcasting_slide_order = counter;
counter++;
}
});
I am dragging and dropping the items in the list, but dragula is not updating the list sorting order.
Can somebody provide me any solution on this?
I am trying to wrap two divs around every 3 pieces of content generated from an API call. It should look like this:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (2)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (3)
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
I have worked on this all day and I can't seem to get it right. Also, I may not be using the most efficient method. I am hoping that someone can tell me what I am doing wrong and how to fix it... also, I am open to any advice as far as streamlining my code. So, with this search 4 pieces of content are returned, and every set of 3 should be wrapped in two divs (item carousel-item and row), but in my attempt below, it seems to be wrapping correctly, but it surrounds 4 instead of three and then brings back a duplicate piece of content for the 4th, I also have an extra div at the end... yikes :)
What I have it doing so far:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (2)
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (3)
</div>
</div>
</div>
***this div should not be here, should have stopped at 3***
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
</div>
***extra div shows up at end***
</div>
Here is the code I used:
jQuery.each(ws_ftr, function(index, ftr) {
if(index % 3 === 0){
jQuery('.carousel-inner').append('<div class="item carousel-item active"><div class="row">');
}
jQuery('.row').append('<div class="col-sm-4"><div class="thumb-wrapper"><div class="img-box">Content Here</div></div></div>');
if(index % 3 === 0){
jQuery('.row').append('</div></div>');
}
your code should be like
function createColumnsList(arr) {
var html = '<div class="row">';
//or another code to start your row like $.append or smth
$.each(arr, function(index, item) {
if (index % 3 == 0 && index != 0) {
html += '</div><div class="row">';
//end and start your row
}
html += '<div class="column">' + item + '</div>';
// output your content from array
});
html += "</div>";
//end row
return html;
}
Change it to fit your needs. Hope it will help you :)
js app
Now In html I user ng-repeat
<div class="row">
<div ng-repeat="item in Photos" class="col col-33"style="border:none">
<img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
</div>
</div>
My problem is that I have 5 images in list but only 3 of them is on dipslay. Another 2 is not shown on display. How can I solve problem ?
Thanks in advance
May be your images have same url value in the Photos array so you need to use ng-repeat with track by $index like this
<div class="row">
<div ng-repeat="item in Photos track by $index" class="col col-33"style="border:none">
<img ng-src="{{item.image}}" imageonload style="width:100px;height:120px;margin-left:auto;margin-right:auto;display:block">
</div>
</div>
$scope.imagearray = {
'images' : []
};
var i,j,temparray,chunk = 3;
for (i=0,j=$scope. Photos.length; i<j; i+=chunk) {
temparray = $scope. Photos.slice(i,i+chunk);
$scope.imagearray.images.push(temparray);
}
<div ng-repeat="img in imagearray.images">
<span ng-repeat="item in img" ></span>
</div>
Try col-xs-2 instead of col-33:
<div class="row">
<div ng-repeat="item in Photos" class="col col-xs-2">
<img ng-src="{{item.image}}">
</div>
</div>
I'm using a carousel that I should render 2 items in each ng-repeat cycle like this:
<div owl-carousel-item="" ng-repeat="item in (filteredItems = (items | filter:query))" class="item">
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::item.name}}</li>
</ul>
</div>
<img ng-src="{{::item.image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
<--PART2: Item must go to next Item for this part -->
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::filteredItems[$index + 1].name}}</li>
</ul>
</div>
<img ng-src="{{::filteredItems[$index + 1].image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
I means in Part2 define in code, I need to move to next item before ng-repeat is called again, I'm using $index+1 but it's not good for me,
I want to it to permanently move to next item not just accessing to it
Does it have something like item.Next() or something?
You could for example try something like this:
<tr ng-repeat="item in items" ng-if="$index % 2 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
</tr>
it may be enough to do the trick for you :)
Edit:
For 3 items you could do:
<tr ng-repeat="item in items" ng-if="$index % 3 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
<td class="text-center">{{items[$index + 2].id}}</td>
</tr>
What i'm trying to do is create an image grid layout. Similar to this but in each box is a photo which is loaded from a json file via a HTTP.get
I'm trying to create the grid layout by creating the first row and then using ng-repeat so it creates new rows.
I'm retrieving my images from a $http.get request which loads the images via a JSON file.
I cannot get the images to display and i'm unsure why. I have no errors in my console log.
This is my HTML code so far.
<div class="row" ng-repeat="" ng-if="$index % 1 === 0">
<div class="col col-33" ng-if="$index < length">
<img ng-src="{{image.image}}">
</div>
</div>
The reason your not seeing any images is because your not accessing your data properly in your HTML. Try this:
<div class="row" ng-repeat="image in data.under9s">
<div id="container" class="col col-33" ng-if="$index < data.under9s.length">
<img class="image image-list-thumb" id="image" ng-src="{{image.image}}" />
</div>
<div id="container" class="col col-33" ng-if="$index + 1 < data.under9s.length">
<img class="image image-list-thumb" id="image" ng-src="{{data.under9s[$index + 1].image}}" />
</div>
<div id="container" class="col col-33" ng-if="$index + 2 < data.under9s.length">
<img class="image image-list-thumb" id="image" ng-src="{{data.under9s[$index + 2].image}}" />
</div>
I think you could easily accomplish your grid using two ng-repeats. Something like:
<div class="row" ng-repeat="category in data">
<div ng-repeat="image in category" id="container" class="col col-33">
<img class="image image-list-thumb" id="image" ng-src="{{image.image}}" />
</div>
</div>
That is security issue. Either use jsonp or CORS.