I am trying to download images from firebase storage into an ng-repeat. The syntax i am using i got from here and also from here.
.controller('tryCtrl', function($scope,$firebaseStorage,$firebaseArray){
$scope.user = 'OPD0wmF3syajsD94ANBBEQgzWPz2';
const rootRef = firebase.database().ref();
const ref = rootRef.child('UserData' + '/' + $scope.user);
var list = $firebaseArray(ref);
$scope.listOFProducts = list;
$scope.getImageUrl = function(Image){
var storageRef = firebase.storage().ref($rootScope.user + '/' + Image);
var storage = $firebaseStorage(storageRef);
return storage.$getDownloadURL().then(function(url) {
$scope.url = url;
console.log($scope.url);
return url;
})
};
})
Here is my html
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3" ng-repeat="items in details.Products">
<div class="spacer" ng-init=""></div>
<a class="button" data-toggle="modal" data-target="#myModal" ng-click="open(items)">
<img ng-src="{{getImageUrl(items.Image)}}" class="img-responsive">
</a>
<p>{{items.Price}}</p>
</div>
<img ng-src="{{url}}">
My challenge is that the returned url does not display any image. The url attached to scope however displays all the image; changing from one image to another within about a second of each image. Conosole.log($scope.url) shows the download url constantly changing. I will be grateful if someone can help me figure this out.
You could directly bind the url, since you have the image in the scope variable,
<img ng-src="url" class="img-responsive">
Related
I need some help about toggling ng-src between for example: image.jpg and image-active.jpg, but I have some issues because I need to active that with AngularJS.
This is the scenario: I called an API data from swagger and use ng-repeat to display images in html.
HTML
<div class="input-group interests-list">
<div class="checkbox" ng-repeat="interest in interests">
<label>
<div class="interest-icon">
<img src="{{interest.iconUrl}}" ng-click="changeImage()">
</div>
<input style="display: none;" type="checkbox" value="{{interest.name}}">
{{interest.name}}
</label>
</div>
</div>
Service
this.getInterests = function () {
var deferred = $q.defer();
var req = {
method: 'get',
url: 'http://customdealwebapi20180125110644.azurewebsites.net/api/Interests'
}
$http(req).then(function (response) {
deferred.resolve(response.data);
}, function (err) {
console.log(err)
});
return deferred.promise;
}
Controller
TestService.getInterests().then(function (data) {
$scope.interests = data;
});
and everything works fine
Now I want to achieve when someone click on the image, ng-src should be changed to image-active.jpg, and on the next click image should be changed to default value (image.jpg)
I know how to achieve through jQuery, like this
$(".interests-list .checkbox label input[type='checkbox']").change(function () {
var selectedIcon = $(this).val();
if (this.checked) {
console.log($(this).prev())
$(this).prev().find("img").attr("src", "assets/img/home/icons/" + selectedIcon + "-active.png");
} else {
$(this).prev().find("img").attr("src", "assets/img/home/icons/" + selectedIcon + ".png");
}
});
Thank you
You can either use ng-show
<div class="checkbox" ng-repeat="interest in interests" ng-init="interest.active = false">
<label>
<div class="interest-icon">
<img ng-show="interest.active == true" src="active.png" ng-click="interest.active = !interest.active">
<img ng-show="interest.active == false" src="other.png" ng-click="interest.active = !interest.active">
</div>
</label>
</div>
or you can pass interest to your click function and set image src in your controller
<img src="{{interest.iconUrl}}" ng-click="changeImage(interest)">
$scope.changeImage = function(interest){
if(checked)
interest.iconUrl = "active.png";
else
interest.iconUrl = "other.png";
}
Hi Here I have to upload single/multiple files in angular js . I have used the below link for uploading files. In this they have uploaded the images but instead I have to upload pdf and image.
<div class="container">
<div ng-controller="MyCtrl" class="row">
<button class="btn btn-primary pull-right" ng-hide="images.length == 0" ng-click="clearAll()">Clear All</button>
<h3 ng-bind="name"></h3>
<input type="file" ng-click="$event = $event" ng-model="display" multiple onchange="angular.element(this).scope().upload(event)" accept="image/png, image/jpeg, image/gif" />
<div class="row">
<div class="col-md-12"> <span ng-repeat='img in images'> <a href="#" ng-click="setImage($index)">
<img ng-src="{{img}}"
alt="Generic placeholder thumbnail" style="max-height:100px;" class="thumbnail"/>
</a>
</span>
</div>
</div>
<img ng-src="{{display}}" ng-hide="!display" />
<h4>You have upload {{images.length}} images this session.
</h4>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = "Select Files to Upload";
$scope.images = [];
$scope.display = $scope.images[$scope.images.length - 1];
$scope.setImage = function (ix) {
$scope.display = $scope.images[ix];
}
$scope.clearAll = function () {
$scope.display = '';
$scope.images = [];
}
$scope.upload = function (obj) {
var elem = obj.target || obj.srcElement;
for (i = 0; i < elem.files.length; i++) {
var file = elem.files[i];
var reader = new FileReader();
reader.onload = function (e) {
$scope.images.push(e.target.result);
$scope.display = e.target.result;
$scope.$apply();
}
reader.readAsDataURL(file);
}
}
})
Thanks in advance.
In this I can able to see the selected images on clicking choose file. But, if it is PDF format i cant able to see the image. Pls provide the solution for PDF.
You can use javascript and PDF.JS.
Example like this:
How to Convert PDF to Image (JPEG / PNG) with Javascript using PDF.JS
How can I get objects stored in localstorage
Here is my html :
<div class="card" ng-repeat="sign in monobjet_json.List">
<ion-item>
<div class="video-container">
<img ng-src="{{sign.src}}" width="200" height="150"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-android-document"></i>
{{sign.texte}}
</div>
</ion-item>
</div>
Access the data from the local storage on the js code not form the html directly.
First check if the data is already in the storage so you can access it directly without making a backend call, if it is not there then make a call to the backend, get the data and store it in local storage.
app.controller('LoginCtrl', function($scope, $http){
var item = localStorage.getItem("object")
if(item) {
$scope.monobjet_json = items;
}
else {
$http.get('signs.json').then(function(res) {
$scope.signs = res.data;
$scope.monobjet_json = JSON.stringify(res.data);
localStorage.setItem("object", $scope.monobjet_json);
});
}
My suggestion here would be to create an angular service which handles the json payload from source and returns a js object representation of the json data. This would potentially contain your array of values as a property.
Service:
return $http.get({'... your endpoint here'})
Controller:
var ctrl = this;
service.getJson()
.then(function(res){
ctrl.list = res.data
}
Now in html you you just bind your ng-repeat to get your image src. Note: $ctrl indicates use of angular component else Replace $ctrl with your controller as var.
<div class="card" ng-repeat="sign in $ctrl.list">
<ion-item>
<div class="video-container">
<img ng-src="{{sign.src}}" width="200" height="150"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-android-document"></i>
{{sign.text}}
</div>
</ion-item>
</div>
Try this:
$http.get('signs.json').then(function(res){
$scope.signs = res.data;
localStorage.remove('object');
if(localStorage.getItem('object') == null){
var monobjet_json = JSON.stringify(res.data.json());
localStorage.setItem("object",monobjet_json);
}
});
if( localStorage.getItem('object') != null){
var monobjet_json = JSON.parse(localStorage.getItem("object"));
var List = monobjet_json.List;// TODO: get some of data from json object
}
});
I am using image picker plugin to select images and display it as a slide. The view part doesnt work. I am getting only img icon and not the images. I have used base64 plugin to convert to base64. I am working on this for more than a week. Any suggestions would be appreciated.
contoller.js
$scope.photoData = [];
$cordovaImagePicker.getPictures(options).then(function(results) {
function successFunc(base64) {
console.log('photoData: ' + base64);
}
for (var i = 0; i < results.length; i++) {
$scope.photoData.push(results[i]);
window.plugins.Base64.encodeFile(results[i], successFunc);
console.log(results[i]);
}
if (!$scope.$$phase) {
$scope.$apply();
}
}, function(err) {
// An error occured. Show a message to the user
});
};
html
<div class="list">
<div class="item">
<ion-slide-box>
<ion-slide ng-repeat="item in photoData">
<img ng-src="data:image/jpg;base64,{{item}}" style="max-width: 100%">
</ion-slide>
</ion-slide-box>
</div>
</div>
I'm new to angularjs and I need to display an image when a thumbnail is clicked.
I wanted to display its Preview picture. It will be fetched on my database.
My Database table on mysql goes something like this:
Materials:{
[name:'material1',
thumbnail:'thumbnail1',
preview:'preview1'],
[name:'material2',
thumbnail:'thumbnail2',
preview:'preview2']
}
I'm also using Laravel as my backend framework. The list of materials are now Displaying but when I clicked on the thumbnail the preview image didn't appear. Is there any way i can fix this?
var imageCtrl = function($scope, $http) {
$scope.materials = [];
$scope.init = function(){
$http.get('api/materials').
success(function(data, status, headers, config){
$scope.materials = data;
});
}
$scope.loadimage = function() {
$scope.image.path = $scope.materials.preview;
}
};
app.controller('imageCtrl', imageCtrl);
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>#{{material.name}}</div>
<img ng-src="#{{material.thumbnail}}" alt="" ng-click="loadimage()>
</li>
</ul>
<img ng-src="#{{image.path}}" alt="">
</div>
On your html page, pass current material object to loadImage function.
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>{{material.name}}</div>
<img ng-src="{{material.thumbnail}}" ng-click="loadimage(material)>
</li>
</ul>
<img ng-src="{{image.path}}" alt="">
</div>
and then from inside controller, update image object.
$scope.loadimage = function(material) {
$scope.image.path = $scope.material.preview;
}