Tips on retrieving the URL of a background image using "$event.target" to display in an Ionic modal

How can I display the clicked image in a modal?

Implementation:

<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-01.jpg)'}"><img src="assets/alpha-4x3.png"></a>
<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-02.jpg)'}"><img src="assets/alpha-4x3.png"></a>

Code in Controller:

 $scope.openModal = function($event) {
   $scope.modal.show();
   $scope.poppedUpImg = $event.target.style.backgroundImage;
 };

Modal Template Content:

<ion-content class="p20">
  <img ng-src="{{poppedUpImg}}" alt="">
</ion-content>

The current code is not functioning as expected. Any suggestions for improvement or alternative approaches are welcomed. The issue arises when an image is placed inside the anchor element, capturing clicks intended for the alpha image.

Edit/Update:

I found that @Sphinxxx's solution works well if the anchor contains text content. However, it does not work when an image is embedded within the anchor tag. Here is my adjusted implementation to resolve this issue.

$event.srcElement.parentElement.style.backgroundImage.split('("')[1].split('")'‌​)[0]
javascriptangularjsionic-frameworkdom-events

Answer №1

Unverified, but my assumption is that 

$event.target.style.backgroundImage
might be equal to "url(assets/img/...)". To extract the URL within the parentheses and create a proper image src, you should perform the following steps:

$scope.poppedUpImg = $event.target.style.backgroundImage
                                        .split('("')[1]
                                        .split('")')[0];

Note:

If the selected <a> includes child elements, $event.target will refer to the clicked child element. For consistent access to the <a> element, utilize $event.currentTarget instead (Angular ng-click $event passes child element as target).

For demonstration purposes (click on either the small "contained" thumbs or the larger backgrounds):
http://jsfiddle.net/U3pVM/26551/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is each individual character displayed on the web page twice when using a controlled component?

Currently, I am diving into the extensive React documentation. A particular section caught my attention - controlled components. It delves into how form elements, such as an <input>, manage their own internal state. The recommendation is to utilize c ...

javascriptreactjsreact-native

Challenges with synchronizing Highcharts horizontally

I have been working on implementing synchronized charts in my application by using the example code provided by Highcharts here. My layout consists of columns created with the Materialize framework, and I placed the charts side by side in a row. However, I ...

javascriptjqueryhighcharts

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

Attempting to compare 2 entries in an *ngFor loop. The code should compare the value at the current object to a value at the previous object. <ng-container *ngFor="let item of s_1.comments[0]; index as b"> <article class="message i ...

javascriptarraysangulartypescript

Passing $scope variable to child controller in AngularJS $modal

JavaScript Code, var mod= $modal.open({ animation: true, templateUrl: $scope.url, controller: function($scope, $modalInstance,custObj) { alert(custObj); /*************Line 1**************************/ $scope.save = function() ...

angularjsangularjs-scope

Working with conditional rendering in React Native allows us to easily change text based on different conditions. By utilizing

Hello fellow React Native beginners! I'm currently working on a feature where the text output on the screen changes based on the time of day. Specifically, I want the screen to display 'Morning' if it's morning, 'Afternoon' i ...

javascriptreactjsreact-nativeif-statementconditional-statements

The initial rendering of the NextJs 13 application is experiencing significant sluggishness when deployed on an EC2

After deploying my NextJS 13.4 app on an AWS EC2 instance with 2 GB of RAM, I noticed that the initial load time is quite slow, taking around 20 seconds to load for the first time. The development mode in NextJS builds and displays the result, which may co ...

javascriptreactjsamazon-ec2next.jsnext.js13

AngularJs JSON endpoint modifier

I've been working on a simple weather app in Angular for practice, but I've hit a roadblock. Here's the Angular JSON feed I'm using: app.factory('forecast', ['$http', function($http) { return $http.get('http: ...

javascriptjsonangularjsurl

Guidance on loading JSON array information into highcharts using AngularJS

I am working on a project in Play Framework (play-java) where I need to display a bar graph using Highcharts. The Java API returns data in JSON format with a field called 'name' containing values like 'Data', 'Gadgets', ' ...

javascriptangularjshighcharts

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Seeking assistance with managing audio on an iPad using JavaScript (mute/unmute). Any suggestions or advice would be greatly appreciated. ...

javascriptjqueryhtmlipad

Screen the $http request information prior to transmission

Angular has a built-in feature that removes properties with a prefix of $$ from request data or params objects. I want to filter out my own UI-specific properties that I don't want to send to the server, but I don't want to rely on using $$. Is ...

javascriptangularjsangularjs-http

Preventing the "save" button from being enabled until a change has been made to at least one input field

I have a page with approximately 20 input fields, along with save and register buttons. Is there a way to activate the "save" button only when a change has been made in at least one of the fields? ...

javascriptangularjs

Implementing Othello Minimax Algorithm in React.js Yields Unsuccessful Results

I need assistance with a recurring issue where the AI player consistently plays the first available move it encounters. My objective was to implement an AI using the Minimax Algorithm, but I'm facing challenges in achieving the desired functionality. ...

javascriptreactjsminimax

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

When attempting to apply the bootstrap link and css files to the URL "/list/:customListName", they are not working. However, changing the URL to "/:customListName" somehow makes it work. What is the reason behind this behavior and how can I properly style ...

javascriptnode.jsmongodbexpressmongoose

Change ES6 JavaScript to ES5 standard

Is there a way to transform this code snippet from other questions into ES5 format? I am attempting to extract data from a JSON array. var match = function(query, input) { return input.filter(function(entry) { return Object.entries(query).every(fun ...

javascriptjson

Encountering a 500 internal server error after deploying due to utilizing getServerSideProps in Next.js

When trying to redeploy my website on Vercel, I added getServerSideProps to my index.js file. However, I encountered an error that I am not familiar with. The program works perfectly on localhost. This is the getServerSideProps code that I added: export a ...

javascriptreactjsnext.js

Show detailed information in a table cell containing various arrays using AngularJS

After integrating d3.js into my code, I now have an array with key-value pairs. Each team is assigned a key and its corresponding cost is the value. When I check the console log, it looks like this: Console.log for key and value Rate for current month [{ ...

javascriptangulartypescriptd3.js

The progress bar is only displayed during the initial consecutive file uploads in Angular 6

Within my Angular application, I have implemented a dedicated form for uploading profile pictures. The process involves triggering a confirmation modal upon uploading a new image, followed by the display of a progress bar on the page. This progress bar ind ...

javascriptangularfile-uploadangular6progress-bar

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

javascriptarraysvue.jselement-plus

What is the best way to execute code after an element has been included in ngFor in Angular 2+?

Within my component, there is a function that adds an element to an array displayed using *ngFor in the view. After adding the element to the array, I want to target it by ID and scroll to it. However, the issue is that this code runs before the element a ...

javascriptangularngfor