Simply, I have an array of objects, [images], that I display perfectly fine on Ng-repeat. When I click one div, I want to see the 'id' property of the particular image that was clicked on in the template.
Function in controller:
angular.forEach(value, function (value, key) {
$scope.images.push({
id: i,
src: ("data:image/jpeg;base64," + value)
});
i = i + 1;
}
$scope.seeOne = function () {
console.log(image.id);
}
My template:
<div id="galscrolldiv" ng-repeat="image in images">
<div ng-click="seeOne()">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
Send the image as parameter from the view/template. Then you can access the image properties of the clicked image.
You've missed the ) of forEach.
Controller:
angular.forEach(value, function (value, key) {
$scope.images.push({
id: i,
src: ("data:image/jpeg;base64," + value)
});
i = i + 1;
});
// Get the parameter i.e. image that is clicked
$scope.seeOne = function (image) {
console.log(image.id);
};
View/Template:
<div id="galscrolldiv" ng-repeat="image in images">
<div ng-click="seeOne(image)">
<!-- ^^^^^-->
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
You can also send the $index property from template
<div id="galscrolldiv" ng-repeat="image in images">
<div ng-click="seeOne($index)">
<!-- ^^^^^-->
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
</div>
Then inside the controller
$scope.seeOne = function (index) {
console.log($scope.images[index].id);
};
But this may cause issue while using filter.
So in case of using filter avoid $index.
Related
I want to repeat data using div and in this div , I have one more repeatation using id value from first repeatation. So I want to pass this value using function in ng-init but got me error.
<div ng-controller="ProductsCtrl" ng-init="getData()">
<div class="col-sm-12" ng-repeat="data in form">
<div class="card">
<div class="card-header">
<h4>{{data.title}}</h4>
</div>
<div class="card-block">
<div class="row" ng-init="getImages({{data.id}})">
<div class="form-group col-sm-3" ng-repeat="image in images">
<figure>
<img ng-src="{{imgURL}}/{{image.file_name}}" width="220" height="176">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption><br />
<label>Description : {{image.remarks}}</label><br />
Read More . .
</figure>
</div>
</div>
</div>
<div class="card-footer">
<h4>{{data.description}}</h4>
</div>
</div>
</div>
</div>
So, how can I pass {{data.id}} in ng-init="getImages({{data.id}})"? If I put value ng-init="getImages(15)" then, item will appear.
file.js
$scope.getImages = function (id2) {
$http.get(commonData.apiURL + 'product/detailsImage.php?id='+id2)
.success(function (data) {
$scope.images = data;
//console.log(JSON.stringify(data));
})
.error(function (data, status, headers, config) {
$scope.errorMessage = "Couldn't load the list of Orders, error # " + status;
console.log("error");
});
}
You need to keep one thing in mind, If you are want your angular code to work on html page, use {{}}. And you do not need these curly braces if you are writing the code with the angular attributes... It means if something is already part of angularjs, you need not to use curly braces.
To solve this issue, you need to replace the below line
<div class="row" ng-init="getImages({{data.id}})">
with this following line
<div class="row" ng-init="getImages(data.id)">
You do not need annotations {{}}
ng-init="getImages(data)
and then inside the controller
$scope.getImages = function(data){
console.log(data.id);
}
I have an image gallery displayed on my page. I need to implement a modal for whenever the user clicks on the images. In the modal I need to show the full size of the selected image. Here is the problem: I have already made the modal work, but when I click on any of the gallery images, the modal shows all of them together in a single modal. I need the modal to only show the one that the user clicked on.
Please note that my webpage is based on AngularJS and PHP. I used ngModal for this modal and that I'm new to using Angular (basically I know nothing, I'm learning), so please be patient with me. Here is my code:
app.js
readApp.controller('newsGallery', function($scope) {
$scope.myData = {
modalShown: false,
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});
HTML
<div ng-controller='newsGallery'>
<modal-dialog show='myData.modalShown' width='75%' height='80%' on-close='logClose()'>
<div ng-repeat = "i in idsBlobs" >
<img src="php/visualizar_archivo.php?id={{i.id}}">
</div>
</modal-dialog>
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class = "col-md-4" ng-repeat = "i in idsBlobs" >
<div class="news-image" align="center">
<img src="php/visualizar_archivo.php?id={{i.id}}" class = "img-responsive img-rounded" ng-click='toggleModal();'>
</div>
</div>
</div>
</div>
One way to have the image that the user clicked on shown in the modal is to introduce a scope variable e.g. $scope.selectedImage. Next, in the function toggleModal(), accept an argument for the image and set that scope variable to that argument.
$scope.toggleModal = function(image) {
$scope.myData.modalShown = !$scope.myData.modalShown;
$scope.selectedImage = image;
};
Next update the call to that function in the ng-click handler:
<img src="php/visualizar_archivo.php?id={{i.id}}" ng-click='toggleModal(i);' class = "img-responsive img-rounded">
Then in the modal markup, show that selected image.
<modal-dialog show='myData.modalShown' width='75%' height='80%' on-close='logClose()'>
<img src="php/visualizar_archivo.php?id={{selectedImage.id}}">
</modal-dialog>
That way the modal will only show the image that the user clicked on, instead of all images in the list.
See a demonstration of this below.
readApp = angular.module('readApp', ["ngModal"]);
readApp.controller('newsGallery', function($scope) {
$scope.idsBlobs = [{
"id": 'MA',
"src": "http://www.animatedimages.org/data/media/96/animated-lighthouse-image-0032.gif"
},
{
"id": "MU",
"src": "http://icons.iconarchive.com/icons/aha-soft/large-home/128/Museum-icon.png"
}
];
$scope.myData = {
modalShown: false
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function(image) {
$scope.myData.modalShown = !$scope.myData.modalShown;
$scope.selectedImage = image;
};
});
.img-thumb {
height: 48px;
width: 48px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//elliott.andrewz.org/cdn/ng-modal.min.js"></script>
<link href="//elliott.andrewz.org/cdn/ng-modal.css" rel="stylesheet" />
<div ng-app="readApp" ng-controller="newsGallery">
<modal-dialog show="myData.modalShown" width="75%" height="80%" on-close="logClose()">
<img src="{{ selectedImage.src }}" />
</modal-dialog>
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class="col-md-4" ng-repeat="i in idsBlobs">
<div class="news-image" align="center">
<img src="{{ i.src }}" class="img-responsive img-rounded img-thumb" ng-click="toggleModal(i);" />
</div>
</div>
</div>
</div>
Im trying to call a function inside ng-init using the result of ng-repeat but the only image displayed is the last image that was pass to the scope variable.
Any tips or suggestion if im doing this correctly?
Template
<ion-item ng-repeat="feed in feeds" ng-if=fbfeed.message ng-init='addAttachment(feed.id)'>
<div class="list card">
<div class="item item-body">
<img src="{{attachment.media.image.src}}">
</div>
</div>
</ion-item>
Controller
$scope.addAttachment = function (postId) {
var attachmentData = MediaManager.getAttachments( postId );
attachmentData.then(function(result) {
if (result.data.length) {
$scope.attachment = result.data[0];
}
});
};
You need to add the attachment field with all the objects . so add that to the object feed .
You can pass the feed id and assign the corresponding image in the function.
HTML
<ion-item ng-repeat="feed in feeds" ng-if=fbfeed.message ng-init='addAttachment(feed)'>
<div class="list card">
<div class="item item-body">
<img src="{{feed.attachment.media.image.src}}">
</div>
</div>
</ion-item>
Controller:
$scope.addAttachment = function (feed) {
var attachmentData = MediaManager.getAttachments( feed.postId );
attachmentData.then(function(result) {
if (result.data.length) {
feed.attachment = result.data[0];
}
});
};
I have the following directive
var chartDir = function () {
return {
scope: {
stat: '='
},
link: function (scope, element, attr) {
console.log(scope);
return;
}
}
HTML
<svg chart stat="stat"></svg>
So in this case I can see in console that scope has a property called stat (an array, not empty!)
Here is the screenshot...
But if I do console.log( scope.stat ) then i get just undefined. I have the same directive in some other chart and it is working fine. But here I can not understand why I can't get access to scope.stat
UPD:
more html
<div class="chart-container container" ng-show="statLoaded">
<div class="text col">
<div class="item" ng-repeat="item in stat | limitTo: middleIndex">
<div class="color">
<div class="sample" color-sample color="item.color"></div>
</div>
<div class="amount">
{{ item.amount }}
</div>
<div class="text">
{{ item.text }}
</div>
</div>
</div>
<div class="col">
<svg chart stat="stat"></svg>
</div>
...
So I see all items and directive "color-sample" works good. So 'stat' is loaded. So, why 'color-sample' directive works and 'chart' doesen't?
Solution is
scope.$watch(attr.stat, function () {
instead of
scope.$watch(scope.stat, function () {
I have an array of objects which i populate on a button click.
When populating this array i make sure that i only add 10 objects to it.
When this is all loaded in the dom i give the user the oppertunity to add a few more objects.
I do this like this:
$scope.Information = [];
$.each(data, function (i, v) {
if (i<= 9)
$scope.Information.push(data[i]);
if(i >= 10) {
cookieList.push(data[i]);
}
}
if (cookieList.length) {
localStorage.setItem("toDoList", JSON.stringify(cookieList));
$(".showMore").removeClass("hidden");
}
$(".showMore").on("click", function() {
var obj = JSON.parse(localStorage.getItem("toDoList"));
console.log(obj);
console.log(obj.length);
SetSpinner('show');
$scope.Information.push(obj);
SetSpinner('hide');
//$.removeCookie("toDoList2");
});
part of the HTML:
<div ng-repeat="info in Information" class="apartment container" style="padding-right:35px !important">
<div class="row" style="height:100%">
<div class="col-md-1 col-xs-12">
<div>
<h4 class="toDoListHeadings">Nummer</h4>
<div style="margin-top: -15px; width:100%">
<span class="toDoListItems number">
{{info.orderraderid}}
</span>
</div>
</div>
</div>
</div>
</div>
My issue: When i add objects to my array of objects "$scope.Information.push(obj);" I assumed that they would get added in the DOM but they do not, how do i do this the angular way?
EDIT MY SOLOUTION:
edited the HTML to use ng-click and the method is as follows:
$scope.addMore = function() {
var obj = JSON.parse(localStorage.getItem("toDoList"));
SetSpinner('show');
$.each(obj, function(i,v) {
$scope.Information.push(v);
});
SetSpinner('hide');
}
Here is the angular way:
The view
<!-- Reference your `myapp` module -->
<body data-ng-app="myapp">
<!-- Reference `InfoController` to control this DOM element and its children -->
<section data-ng-controller="InfoController">
<!-- Use `ng-click` directive to call the `$scope.showMore` method binded from the controller -->
<!-- Use `ng-show` directive to show the button if `$scope.showMoreButton` is true, else hide it -->
<button data-ng-click="showMore()" data-ng-show="showMoreButton">
Show more
</button>
<div ng-repeat="info in Information" class="apartment container" style="padding-right:35px !important">
<div class="row" style="height:100%">
<div class="col-md-1 col-xs-12">
<div>
<h4 class="toDoListHeadings">Nummer</h4>
<div style="margin-top: -15px; width:100%">
<span class="toDoListItems number">
{{info.orderraderid}}
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
The module and controller
// defining angular application main module
var app = angular.module('myapp',[])
// defining a controller in this module
// injecting $scope service to the controller for data binding with the html view
// (in the DOM element surrounded by ng-controller directive)
app.controller('InfoController',function($scope){
$scope.Information = [];
$scope.showMoreButton = false;
// Bind controller method to the $scope instead of $(".showMore").on("click", function() {});
$scope.showMore = function(){
var obj = JSON.parse(localStorage.getItem("toDoList"));
console.log(obj);
console.log(obj.length);
SetSpinner('show');
$scope.Information.push(obj);
SetSpinner('hide');
//$.removeCookie("toDoList2");
};
$.each(data, function (i, v) {
if (i<= 9) $scope.Information.push(data[i]);
if(i >= 10) cookieList.push(data[i]);
});
if (cookieList.length) {
localStorage.setItem("toDoList", JSON.stringify(cookieList));
//$(".showMore").removeClass("hidden");
$scope.showMoreButton = true; // use $scope vars and ng-class directive instead of $(".xyz").blahBlah()
}
});
You should not use JQuery, use ng-click to detect the click, because angular has no idea when JQuery is done and when it needs to refresh the interface