Angry Librarians Uncover Secret to Incrementing Variable in Angular.js

Check out my HTML snippet:

<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=7">
    {{myVar}}
    <span ng-init="myVar=myVar+5">{{myVar}},</span>
    <span ng-init="myVar=myVar+15">{{myVar}},</span>
    <span ng-init="myVar=myVar+37">{{myVar}},</span>
</div>   

Also, here is the accompanying script:

var app = angular.module('app',[]);
app.controller('MyController', function() {});

The current output shows as 64,64,64,64

I'm aiming for an output like this: 7,12,27,64

I have been exploring options like ng-repeat but struggling to store values in an array.

Answer №1

Within each instance of ng-init, the value of myVar is being modified, which in turn affects all other instances that are bound to it; causing them to display the same value. To avoid this issue, consider the following approach:

<div ng-app='myApp'>
<div ng-controller="MyController" ng-init="myVar=7">
    {{myVar}}
    <span>{{myVar+5}},</span>
    <span>{{myVar+15}},</span>
    <span>{{myVar+37}},</span>
</div>   

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

Error message: It seems the spatial reference for this ESRI object is missing

Currently, I am utilizing Esri GIS to load the center location from an address. However, I am encountering an issue as I am using a geocoder from Google to obtain longitude and latitude, which is resulting in the following error message: TypeError: this.s ...

Transforming DOM elements into Objects

Here are some values that I have: <input name="Document[0][category]" value="12" type="text"> <input name="Document[0][filename]" value="abca.png" type="text" > I am looking for a way to convert them into an object using JavaScript or jQuer ...

Upon successful registration, users will be automatically redirected to their profile page

Having trouble with the redirection to the login page from my profile page, which is an HTML file and the main page is the login page. I've tried redirecting to both pages, but it always lands in the catch block whenever a redirect is attempted. angu ...

Encountering invalid JSON response while making an API request

Struggling to integrate GoToMeeting's API by sending a POST request to create a meeting. Currently, attempting to manually code the meeting body and send the necessary headers, but encountering an issue with invalid JSON error. Below is the code snipp ...

How to Implement Autocomplete Feature in Angular

CSS <div class="dropdown"> <input type="text" formControlName="itemName" (ngModelChange)="filterItems()" class="dropdown-input" (keyup)="onKeyPress($event)" (blur)="toggleDropdown(0)" (focus)="toggleDropdown(1)" placeholder="Search..." [ngCla ...

What could be causing the Firebase email verification to result in a 400 error?

I've been struggling to implement email verification in my React website. Every time I try to use the sendSignInLinkToEmail function, I keep encountering this error: XHRPOSThttps://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=XXXXXXXXXXX ...

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

How big should the placeholder image be for the image area?

How can I create a loading image to replace a .gif while it loads? I need a placeholder image of about 325x325 (same size as the gif) to keep content in place. I've attempted using background: url() without success and haven't explored JS/jQuery ...

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

Using JavaScript to Capture a Webpage Element as an Image

Although this question has been asked in the past, I am hoping for updated information since all the answers are from a few years ago. While searching, I came across https://github.com/apollolm/phantasm, which seems to be exactly what I need. However, it ...

Retrieve the element (node) responsible for initiating the event

Is there a way to identify which element triggered the event currently being handled? In the following code snippet, event.target is only returning the innermost child node of #xScrollPane, with both event.currentTarget and event.fromElement being null. A ...

Issue with ASP.Net WEB API and Angular neglecting to display a specific column over another

After successfully setting up an asp.net web API and scaffolding to my SQL server database, I noticed that the records returned from SQL server are in JSON format. The model contains a few tables linked by foreign keys and currently only includes 2 records ...

Utilizing Ember to transmit models to Bootstrap Popovers

Seeking assistance from anyone familiar with utilizing Bootstrap for Ember components to help resolve an issue. I am trying to understand how to pass a model to the component when using {{bs-bind-popover}} <div {{bs-bind-popover templPop}}>Show pop ...

Two separate ajax functions executed sequentially both yield identical results

I am encountering a strange issue with 2 different ajax functions being called consecutively. Each function fetches a different value and populates different text boxes, but they both return the value of the first function called. Here is the code snippet ...

ReactJS | Display or Conceal an Array of Objects depending on a specified condition

The Challenge: I am currently working on a task that involves hiding/showing react elements dynamically based on a property of the constructed Object. To be more specific, let's consider the Array of Objects below: const Apps = [ {name: App1, permi ...

Property of object (TS) cannot be accessed

My question relates to a piece of TypeScript code Here is the code snippet: export function load_form_actions() { $('#step_2_form').on('ajax:before', function(data) { $('#step_2_submit_btn').hide(); $(&ap ...

Tips for sending an array of data from the client to req.body in an axios request

I am facing an issue with sending user data collected from the front end via an ajax call to an axios post request in the back end. The parameters I need to pass include arrays of data, but when I check the req.body in the backend using console.log(), I no ...

Leverage JavaScript to retrieve the number of active Ajax requests in JSF

When running Selenium tests using JS, I want to ensure that there are no active Ajax requests. While I can successfully extract the amount of active Ajax requests for jQuery and PrimeFaces, I am facing some issues with JSF. String jsPF = "return PrimeFace ...

Having trouble resolving all parameters for AuthService in Angular

Launching my angular app has hit a roadblock with this perplexing error. Despite attempts to troubleshoot by removing the auth service provider and constructor reference from my component, the issue persists. As a novice in angular, I'm struggling to ...

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...