The functionality of ionic ng-if is not compatible with using $index as the index of the scope in the template

Currently, I am encountering an issue with ng-if when using the following code:

<ion-slide-box ng-if="sencillo.length && sencillo[$index].custom_sound_path" on-slide-changed="slideHasChanged(sencillo[$index].custom_sound_path)" class="fondo-rojo" show-pager="false" does-continue="true">
             
                <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo"  repeat-done="repeatDone()">
                      
                           <h1 class="margen-slide slide-estilo">{{senci.title}}</h1>
                           <div style="margin: 0 auto; width:70px" >
                           <a ng-click="play(senci.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a>
                           <!--<button ng-click="nextSlide()"> >> </button>-->
                           </div>
                </ion-slide>
              
            </ion-slide-box>
          
           
            <ion-slide-box ng-if="sencillo.length && !sencillo[$index].custom_sound_path" on-slide-changed="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3')" class="fondo-rojo" show-pager="false" does-continue="true">
                <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo"  repeat-done="repeatDone()">
                      
                           <h1 class="margen-slide slide-estilo">{{senci.title}}</h1>
                           <div style="margin: 0 auto; width:70px" >
                           <a ng-click="play('/android_asset/www/raw/'+senci.sound_title+'.mp3')"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a>
                           <!--<button ng-click="nextSlide()"> >> </button>-->
                           </div>
                </ion-slide>
            </ion-slide-box>

I am attempting to check if sencillo[$index].custom_sound_path exists. If it does, then run the first slidebox, otherwise run the second slidebox. The problem lies in the fact that the ng-if always detects sencillo[$index].custom_sound_path as a null value, causing only the second slidebox to be executed. Strangely, this method works perfectly in a different view, as shown below:

<div ng-if="editsimpleRow.custom_sound_path">
                    <a ng-click="play(editsimpleRow.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a>
                    <!--<a ng-click="play(editsimple.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a>-->
                </div>
                <div ng-if="!editsimpleRow.custom_sound_path">
                    <a ng-click="play('/android_asset/www/raw/'+editsimpleRow.sound_title+'.mp3')"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a>
                </div>

The only apparent difference is the $index value. Any assistance or insights would be greatly appreciated. Thank you, and please excuse any language difficulties.

javascriptangularjsionic-framework

Answer №1

After some tinkering, I managed to solve the issue by adjusting my view code:

<ion-slide-box ng-if="sencillo.length" on-slide-changed="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3',sencillo[$index].custom_sound_path)" class="fondo-rojo" show-pager="false" does-continue="true">
                <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo"  repeat-done="repeatDone()">
                      
                           <h1 class="margen-slide slide-estilo">{{senci.title}}</h1>
                           <div style="margin: 0 auto; width:70px" >
                           <a ng-click="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3',sencillo[$index].custom_sound_path)"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a>
                           <!--<button ng-click="nextSlide()"> >> </button>-->
                           </div>
                </ion-slide>
            </ion-slide-box>

Furthermore, I made a modification in my controller by adding an 'if' statement:

$scope.slideHasChanged = function(src, srcdos){
        
        if (srcdos == null){
            $scope.play(src);

        }else {
            $scope.play(srcdos);
        }
       
     }

It's worth noting that the updated function slideHasChanged now accepts two parameters instead of one.

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

Execute Javascript to simultaneously open various links in a single action (not using popups)

I am looking to open multiple URLs with a single click event that also redirects to a specified URL. I have attempted this, but it doesn't seem to be working as intended. Here is the HTML code: <a id="mybutton" href="http://example.net/quote" onc ...

javascriptjquery

Tips for making a call synchronous in node.jsAlso, would you like me to provide

Check out the code snippet below. I need the 2nd MongoDB query to wait for the results of the first one before executing, but that's not happening currently. db.collection('student_profile', function (err, stuColl) { //The if-else stateme ...

javascriptnode.jsmongodbexpress

The middleware in ExpressJs does not seem to function properly following its import

Below is the code snippet from my app.js file: import path from 'path'; import bodyParser from 'body-parser'; import express from 'express'; import defender from 'inflex-defend-api'; import { key, secret } from &a ...

javascriptnode.jsexpressmiddleware

Guide for configuring Quirks mode for Documents in asp.net

Currently, I am using Internet Explorer 10 and I am looking to set the Document mode of the browser to normal Quirks instead of IE 5 quirks for my website. I have tried adding <meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=edge"> in my m ...

javascripthtmlcssasp.net.net

Possible undefined object in React Redux

I'm encountering a Typescript issue where Redux object I am utilizing is potentially undefined, even though I have not specified its type as potentially being undefined or set it to be undefined anywhere in my code. /redux/globalSettings/actions.ts ...

javascriptreactjstypescriptredux

Issue encountered when using exports in a React project - Uncaught ReferenceError: exports is not recognized

Recently, as I began my journey with React.js, I encountered a perplexing error. Within my project, there is a file that exports a function in the following format: exports.building = { //... //Something goes here... }; To import this function, I uti ...

javascriptreactjs

Issues with retrieving external JSON data using AngularJS

After tackling all the exercises, I'm left with one final problem that I need help with. The JSON data I need is located on a separate server. When attempting to retrieve it using $http.get, the cross-server request is blocked. Switching to $http.jso ...

angularjsjsonjsonp

The issue persists with the Javascript AJAX POST Method as it fails to transmit values to the designated

I have been using Javascript AJAX to make a request to a php page and receive the output from that page. Interestingly, when I use the GET method in my AJAX call, everything works as expected. However, the issue arises when I try to use the POST method. B ...

javascriptphpjqueryajax

Angular Validation displays ng-valid when the form is actually invalid

I am currently working on a wedding RSVP form https://i.stack.imgur.com/Ct8Ux.png My objective is to hide the DONE submit button and only display it when the form is considered valid. <form method="POST" action="http://l.bheng.com:8888/wedding" acce ...

javascriptjqueryangularjsformsvalidation

Is there a way to determine if a website is utilizing javascript?

Currently, I am in the process of developing a web scraping tool using beautifulsoup. Some of the websites I am targeting contain JavaScript elements that prevent me from using urllib3 efficiently. As a workaround, I have incorporated selenium into my sc ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

When utilizing the AngularJS Treeview component (without relying on jQuery), how can the data-node-label be associated with the data being used?

Take a look at my code on jsFiddle: Check it out. I'm currently experimenting with the AngularJS Treeview component and you can view the official demo here. <div data-angular-treeview="true" data-tree-model="data" data-node-id="value" dat ...

angularjsangularjs-directivetreeview

Unable to create a new collection in Firebase Firestore

I encountered an issue while trying to add a collection in Firebase Firestore using the function .collection(doc).set. Despite finding the new user in authentication in Firebase, the collection was not created and the console displayed an error message. ...

javascriptangularfirebasegoogle-cloud-firestore

Enhance Your Contact Form with jQuery Validation Engine

I have implemented a contact form with added features of jQuery fadeLabel and validationEngine to enhance its appearance on the page. The file containing this code is either index.php or .html, which I have not yet determined. Here is the script from my i ...

javascriptjqueryajaxformsjquery-validation-engine

Oops! Looks like a problem with the controller registration in this code: "[$controller:ctrlreg] http://errors.angularjs.org/1.7.4/$controller/ctrlreg?p0=App

My goal is to create a multilingual website, but I encountered an issue when trying to switch between languages. An error message appeared in the console and prevented the language change from happening. Index.html <html ng-app='mpdmApp' lan ...

angularjsangular-translate

Is your Jquery validation malfunctioning?

I am currently facing a challenge with required validation on an asp.net page. In order to validate the inputs, I have implemented multiple controls which can be hidden or displayed based on certain conditions. These controls include checkboxlists, dropdow ...

javascriptjqueryhtmlasp.netcss

Leveraging AngularJs with MongoDB and Mongoose

I am working on connecting AngularJS with MongoDB using Mongoose. My goal is to pass the Models to controllers so that I can utilize $scope to access the data. I am unsure about setting up an Angular Service for this purpose, and would appreciate any guida ...

mongodbexpressangularjs

What causes these queries to function separately but fail when combined?

I am facing an issue with combining 2 queries in my Firestore collection. These are the 2 examples that work: database .collection('servicebonnen') .where('medewerker', '==', 'CEES') and: database .collecti ...

javascriptfirebasevue.jsgoogle-cloud-firestore

JSON input in react.js sadly ended abruptly

I am encountering a problem when I attempt to submit the form. Unhandled Rejection (SyntaxError): Unexpected end of JSON input Whenever I press the submit button, this error occurs, here is the code snippet: onButtonSubmit = () => { this.setState({ ...

javascriptreactjsnpmpromisefetch

Retrieve specifically chosen values from the dropdown menu and eliminate any values that have not been selected

Within my two multiple dropdowns, the first contains all available fields with their corresponding values. The second dropdown displays the selected value along with all other values that were not selected. However, I only want to show the three values tha ...

javascriptphpjquerydrop-down-menu

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

javascriptnode.jshtmlwebsocket