I have retrieved an image and its corresponding data dynamically, in which I want to make the image clickable which will redirect to a webpage.
How can I achieve this using angularJs.
I am using only angularJs, no jquery.
Below you can see you can assign the values to an object and then use that object on the image tag. If you want to make any other changes on click as well then you can use ng-click as shown below then use $location.url.
$scope.object = {};
$scope.object.filepath = filepath;
$scope.object.redirectURL = redirectURL
<img ng-src="object.filepath" ui-sref="{{object.redirectURL}}" />
$scope.redirect = function(redirectURL)
{
$location.url(redirectURL);
};
<img ng-src="object.filepath" ng-click="redirect(redirectURL)" />
You can use ng-click on the image element. You can handle the click event in your controller where you can navigate to the webpage.
In your controller you can redirect the page to the webpage url.
$scope.goToWebpage = function(imageParam){
window.location.href = "http://UrlToWebpage.com";
}
Alternatively you can wrap the image inside an anchor tag. On clicking the image the page will be redirected to the specified url mentioned in href.
<a href="http://UrlToWebpage.com" >
<img src="sourceToImage" />
</a>
Related
In my Ionic 2 app I have a template with this code:
<div class="body" [innerHTML]="ticket.Body | safeHtml"></div>
The body is HTML that is returned from a remote API. That HTML can contain images. I want to bind a "click" event handler on those images so that I can open them in an InAppBrowser when a user taps on them.
What would be the best way to do that?
Angular 4.1.3, Ionic 3.3.0
Solution 1
Try binding an event on to the parent to capture clicked target elements.
// HTML file
<div class="body" [innerHTML]="ticket.Body | safeHtml" (click)="bodyDivClick($event)" >
</div>
// TS file
bodyDivClick(event) {
// Check if the clicked target is an Image element.
// You can also check by css class name for specific image elements.
if (event.target && event.target.tagName === 'IMG') {
let imageElem = event.target;
console.log('Image clicked');
}
}
Solution 2
You can also try using ngFor to loop your results (images) into view and bind an event on the image itself.
Assuming that ticket is a JSON parsed object retrieved from the remote API.
<div class="body">
<div *ngFor="let imageUrl of ticket.images; let i = index;" class="image-container" >
<img src="{{imageUrl}}" class="image-style" (click)="imageClick()" />
</div>
</div>
Most probably the first solution might work for you if you are not able to change the response of the Remote API from html to JSON/objects (if it's not implemented by you).
I have a <div id="section1"> </div> at the bottom of my page.
And I have a button I want this functionality in button
$location.hash('section1');
$anchorScroll();
It is working as I want but it is giving me ugly url all this is in single page than why my url is updating?
my expecting Url is :
/Order/BuildOrder
when page load I get this but when I click button screen took me to my anchor div with id='section1'
but now url change to /Order/BuildOrder#!#section1
How can I remove #!# as this is scrolling on a single page. href location is not changing
I have a simple angular form that I want to use to send an image to a remote server. I am binding the image src property to a photo pulled from device camera.
But when it's submitted, the image data is empty (ng-model is not binding to the img src attribute). I am having to separately add the image to the form object prior to submitting. Should i have to do that, or can I bind the image data properly to the form?
HTML
<form ng-submit="sendPost(post)">
<img ng-src="{{imageURI}}" ng-model="$parent.post.image"/>
</form>
Controller
$scope.post = {
image: ''
}
$scope.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll
$scope.sendPost = function(post) {
//i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}
Your idea is too complicated, no need to bind ngModel as <img> is not an Angular directive, but a simple HTML tag.
Option 1
If you want your <form> to submit via Angular/AJAX, there's no need to have the <img>-tag in the form (or have a <form> at all), but I'll leave it in, as I am not sure if you want to show the image prior to submission or not.
Option 2
If you don't want to submit via Angular, you need an <input type="hidden" ng-model="post.imageURI">, but you also need the usual action attribute at the <form>
Back to option 1: just reduce your model to $scope.post, both for the HTML and the Angular code:
HTML
<form ng-submit="sendPost()">
<img ng-src="{{post.imageURI}}"/>
</form>
Controller
$scope.post = {}
$scope.post.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll
$scope.sendPost = function() {
// need to check here if $scope.post.imageURI is populated
$http.post(
...
data: $scope.post,
....
);
//i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}
In the HTML try change your ng-model from
<img ng-src="{{imageURI}}" ng-model="$parent.post.image />
to
<img ng-src="{{imageURI}}" ng-model="post.image" />
It should work.
On click of following button PDF download starts in the browser
<input name="SavNSend" class="gradient_button" id="printPdf" type="button" value="Save to PDF" ng-click="savePdfRP()"></input>
But what I want is to open a new tab in order to download the pdf. Can this be achieved using ng-click with button or ng-click with tag.
If you want to open a new tab/window. You need to use lower level services such as $window.
ng-click="savePdfRP()"
$scope.savePdfRP= function() {
$window.open(url, windowName);
}
Another approach is to bind the href of the anchor.
<a class="gradient_button" id="printPdf" ng-href="{{ url }}" target="_blank">Save to PDF</a>
$scope.url = 'http://www.google.com';
I'm making a functional button in my ionic app, and I want to know what I need to do to make a button centered on a blank ionic app load another page when clicked.
I have experimented with adding ng-click="loadPage()" to the button in my index.html file. I defined
$scope.loadPage = function() { $state.go(page.html)} in my controller.
switch your button with an anchor
<a class="btn btn-full" ui-sref="your.state">your text</a>