Undefined variable when initializing with ng-init

As a newcomer to AngularJS (and JavaScript in general), I'm currently facing an issue that I could use some help with.

Below is the HTML template I am using:

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
        <ion-item ng-repeat="playlist in playlists" ng-init="pageID=playlist.id" href="#/app/music/{{playlist.id}}">
            {{playlist.title}} {{pageID}}
        </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

And this is the corresponding controller:

.controller('MusicCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
  $scope.$watch('pageID', function () {
    console.log($scope.pageID); 
  });

Although {{pageID}} appears correctly on the page, it seems undefined when checked in the console. Can anyone point out what mistakes I might be making here?

javascriptangularjsionic-framework

Answer №1

When you see undefined for pageid in the console, it is because you have not properly defined it in your controller. Instead of just assigning a value in ng-init, make sure to define it within your controller. By doing this, you can avoid seeing undefined.

.controller('MusicCtrl', function($scope) {
   $scope.pageID = 1;//just an example

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

Remove data from a database using Ajax in ASP.NET MVC without utilizing DataTables

I'm encountering a slight issue with my code. I am attempting to delete a row from the database without using DataTables in ASP.NET MVC, but it seems to be not working as expected. I have displayed all items from the database on a page within div elem ...

javascriptc#jquery.netajax

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

Executing php class method through ajax with jQuery without requiring a php handler file

How can I trigger a PHP class method using AJAX with jQuery without the need for a separate PHP handler file? Here is my PHP Class animal.php:- <?php class animal { function getName() { return "lion"; } } ?> jQuery code snippet:- ...

javascriptphpjqueryajax

Having difficulty showing the ionic back button within my side menu

I recently added an ion-nav-back-button to my side menu in the ion-nav-bar, but I encountered an issue where the nav back button did not display. Despite trying various attributes, the button remains hidden. Below is the code for my menu layout with the si ...

angularjsionic-framework

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

Apologies, but as a beginner developer, I'm struggling to see how this relates directly to the questions already mentioned. I have no understanding of ajax and I'm unsure how to adapt the solutions provided to my own situation. Currently, I&apos ...

javascriptnode.jsasynchronousreturn

Is there a way to create a curve that stays below the text and does not intersect with it?

I am attempting to center a text on a quadratic curve or line, as shown in the image below: https://i.stack.imgur.com/XH6Fw.png My current approach using ctx.fillText results in the text overlapping the curve. https://i.stack.imgur.com/ddwue.png Is ther ...

javascripthtml5-canvasquadratic-curve

Adding dots between page numbers when using ReactJS/Javascript Pagination can be achieved by implementing a specific method

I have created a pagination component using React JS. Currently, it only displays all the page numbers, but I want it to show dots when there are more than 8 total pages. Here's how I envision it: c. When total is less than 9 pages: Page 1 selecte ...

javascriptreactjs

The variable req.body.username is not defined in the context of JavaScript

I am completely new to JS, Angular.js and node.js. I am currently working on a login-register project but facing a minor issue. Below is my code: login.ctrl.js: var app = angular.module('login-register', []); app.factory('UserLog', ...

javascriptnode.jsexpressmongoose

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

javascriptjqueryhtmlcss

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

Here is the code snippet I'm working with: this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => { this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height( ...

javascriptangulartypescriptionic3

Adding a value to an element in JavaScript to interact with it using Selenium

After implementing the provided code snippet, I noticed that it replaces the value in the element with a new one. However, I am looking to append or insert a new line rather than just replacing the existing value. Is there an alternative command like app ...

javascriptjavaseleniumselenium-webdriverwebdriver

Troubleshooting Firefox in Python Selenium: When using driver.execute_script to delete text characters using JQuery, encountering "SecurityError: The operation is insecure" error

Currently working with Selenium 3.141.0 using Python and Firefox 88.0 with geckodriver 0.29.1. In the past, I successfully used the following JavaScript code to remove unwanted characters (like ®) from web pages, as referenced in this answer: driver.exec ...

javascriptpythonjqueryseleniumfirefox

Puppeteer App Error: An error has been detected on the client side

I am facing an issue using Puppeteer with NEXT.JS while attempting to capture a screenshot. Everything runs smoothly on localhost, but in production, the captured image comes back with the following error message: Application error - a client-side exceptio ...

javascriptnode.jsnext.jspuppeteer

Arranging an array containing three elements

As I work on my angular app, I have come across the following array: [ { "Name": "Jack", "IncomingTime": "2020-06-19T11:02+00:00", "Outgoingtime": "2020-06-19T11:07+00:00" ...

javascriptangulartypescriptangular8

React.map does not retrieve the specific value

I am facing an issue with my list of items. I have implemented it using mui list, and I have also added a button for editing the list. However, when I click on an item, I am getting the value of the last item instead of the one I clicked on. Below is my f ...

javascriptreactjsmaterial-ui

Switch the placement of two DIV elements by their corresponding IDs

I am attempting to adjust the position of two divs using jQuery, but I seem to be a bit confused as they are already swapping positions. However, when they do swap, it results in a duplication of the field. I have tried using both insertBefore and insertA ...

javascriptphpjqueryhtmlcodeigniter

Having trouble changing the text color of an AngularJS Material label

I've been experimenting with AngularJS Material, but I'm facing challenges in customizing the text color and styles. Despite trying various methods like MDBootstrap, md-color, and basic html style color, I haven't been able to make any chan ...

angularjsangular-material

Exploring the ins and outs of building JavaScript objects using constructors

When creating a new object with var obj = new Object(value); and assigning property values with obj.value = newValue, I encountered an issue where only one of these actions would work at a time. Is there a way to make both work within the same object decla ...

javascriptoopjavascript-objects

The Double Negation operator

While reading a book, I came across this code snippet: !!(document.all && document.uniqueID); I'm wondering why the double not operator is used here. Doesn't the && operator already convert the result to a Boolean? ...

javascriptbooleannegation

You are limited to storing only up to 2 items in the localStorage

My goal is to save items in local storage as an array of objects. Initially, it works perfectly and stores the first element in local storage as needed. However, I am facing an issue where I cannot store more than one element. Below is the code block that ...

javascriptreactjslocal-storage