How to choose multiple images in Ionic framework

I am working with the following HTML structure:

<div ng-repeat="image in images">
<img ng-src="img/{{image}}_off.png" />
</div>

Additionally, I have the following JavaScript code in the controller:

$scope.images = ['imga','imgb','imgc'];

In my project directory, I have the following image files:

imga_off
imga_on
imgb_off
imgb_on
imgc_off
imgc_on

The task at hand is to implement functionality that allows switching between the 'on' and 'off' state of an image when it is clicked.

I am considering different approaches. Would it be best to attach an ng-model for each img-element or is there a more efficient way to achieve this?

javascriptangularjsionic-framework

Answer №1

Storing toggle information in the $scope variable:

var $scope.toggles = [false, false, false];

Toggling based on the $index:

<div ng-repeat="image in images">
  <img ng-src="img/{{image}}_{{ toggles[$index] ? 'on' : 'off' }}.png" ng-click="toggles[$index] = !toggles[$index]"/>
</div>

Disclaimer: This code has not been tested, but it presents a general approach. Alternatively, you could include toggle data in $scope.images

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

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

How to trigger the error callback instead of success in AngularJS when making an Ajax post request

I'm relatively new to using ajax so please bear with me. When working with AngularJs, I typically execute an ajax post request like this: $.ajax({ url: "http://localhost:65337/api/Account/Register", type: ...

jqueryajaxangularjsasp.net-web-apihttp-post

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Assigning ng-view to "NAME" using RouteProvider

I'm completely new to Angular and I have a question regarding injecting a template or URL into multiple ng-views. However, my current approach involves having ng-view in my base template. My base template structure is as follows: <body> < ...

javascriptangularjs

Extract data from dynamically loaded tables using PhantomJS and Selenium Webdriver

I've been informed by everyone that I should be able to retrieve the table content using PhantomJS when working with JavaScript. However, despite my attempts, I have not been successful. My expectation was to obtain the table from the website Page 1 ...

javascriptselenium

Creative ways to use images as borders with CSS in React JS

import React, { Component } from 'react'; class BigText extends Component { constructor(props) { super(props); this.state = { title: '', text: '', summary: '' ...

javascriptcssreactjs

Can you explain the functionality of this Observable in the context of this Angular 2 example?

I'm not too familiar with JavaScript/TypeScript and I have a question about how this code snippet works: onGet() { this.serverService.getServers() .subscribe( (servers: any[]) => this.servers = servers, // an array of anythin ...

javascriptangulartypescriptjavascript-frameworkangular2-observables

Deactivate the button and forms in AngularJS

Hey there, I could really use some assistance with this. I'm puzzled as to why my form and buttons aren't disabling during the file upload process. Any help would be greatly appreciated. Thank you! <div> <form name="formImport" ng-s ...

angularjsbuttonfile-upload

What is causing my div exchange using .class to fail?

Struggling to convert this code from working with IDs to Classes. The code reveals one Div while hiding another based on the onClick event. Originally, it was straightforward because the div location was absolute. In the classes version, I need to revea ...

javascriptjqueryhtmlcssjquery-selectors

Is there an effective way to merge two collections?

I came across an issue where I am attempting to merge two arrays that resemble the ones listed below: var participants = [ {id: 1, name: "abe"}, {id:2, name:"joe"} ]; var results = [ ...

javascriptperformancenode.jsunderscore.jsasync.js

Methods for transforming a TypeScript class instance containing getter/setter properties into a JSON format for storage within a MySQL database

I am currently working on a TypeScript class that includes a getter and setter method: export class KitSection { uid: string; order: number; set layout(layout: KitLayout) { this._layout = new KitLayout(layout); } get layout( ...

javascriptjsontypescript

Utilizing NextJs req.query parameter in Prisma for advanced query filtering

Currently, I am delving into the world of NextJS and experimenting with sending requests to an API while passing a parameter that is then used by Prisma to query the database. In order to achieve this, I've created a new file located at /api/posts/[s ...

javascriptnext.jsquery-stringprisma

What steps can I take to trigger a 404 error instead of a cast error?

My route is defined as /mysafe/idofthemodel. When the idofthemodel is not found, it throws a cast error Cast to ObjectId failed for value "something" (type string) at path "_id" for model "modelname". Instead of this error, I ...

javascriptnode.jsmongodbexpressmongoose

The function to navigate, 'navTo', is not defined and so it cannot be read

I am trying to create a navigation button in my SAPUI5 application deployed on Fiori _onPageNavButtonPress: function () { var oHistory = History.getInstance(); var sPreviousHash = oHistory.getPreviousHash(); if (sPreviousHash !== ...

javascriptsapui5sap-fiori

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

javascriptnode.jsexpress

Submitting data twice through AJAX POST requests

Using a PHP file called via AJAX to insert data into MySQL. Prior to the insert statement, the PHP code runs a select query to check for duplicate records and then proceeds with the insert statement. Problem: When calling the PHP file from AJAX, it gets ...

javascriptjqueryajaxtwitter-bootstrapbootstrapvalidator

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

When using the fetch function, I encountered an error with the "fetchUrl" argument: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'RequestInfo'. This is the code snippet where the error occurred: ...

javascripttypescriptfetch-api

How can I merge these two Observables in Angular to create an array of objects?

Let's say we are working with two different datasets: student$ = from([ {id: 1, name: "Alex"}, {id: 2, name: "Marry"}, ]) address$ = from([ {id: 1, location: "Chicago", sid: 1}, {id: 2, location: &qu ...

javascriptangulartypescriptrxjs

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not su ...

javascripthtmlcss