Updating Array Values in AngularJS based on Input Text Box Modifications

In my application, there is a text box that looks like this -

<input type="text" class="form-control" id="inputID" name="ItemId" ng-model="inputItemId" ng-required="true" ng-blur="addValueToArray(inputItemId)"/>

The user has the ability to add or remove these text boxes based on their needs. All the entered values from these text boxes are stored in an array like so -

        $scope.itemIDs = [];
        $scope.addValueToArray = function(inputItemId)
        {       
            $scope.validID = $filter('uppercase')(inputItemId); 
            $scope.itemIDs.push($scope.validID);        
        }

All the IDs the user enters get added to the $scope.itemIDs array.

For example, let's say the current values in this array are - ABC, ABD, ABE, ABZ for different items.

Now, if a user wants to update the second value from ABD to ABW, as per how my function works, it simply adds ABW at the end of the array resulting in - ABC, ABD, ABE, ABZ, ABW.

Is there a way in Angular where I can replace the existing value in the array with a new one instead of adding it to the end? Am I overlooking something?

Answer №1

Here's a suggestion to consider:

$scope.itemIDs = [];
  $scope.updateValueInArray = function(prevValue, nextValue){ 
    $scope.itemIDs[$scope.itemIDs.indexOf(prevValue)] = nextValue;
  }

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

`Navigating through Indices Manually`

Is there a way to manually check the indices of a given integer number? For instance, I want to determine if the indices are even or not. Would converting it into an array and then checking for indices be the best approach here? I'm feeling a bit lost ...

Simple Timer App with Vanilla JavaScript

Hey there! I am a newcomer to JavaScript and recently joined the stackoverflow community. Currently, I am working on a project called Pomodoro Timer with the goal of creating something similar to this example: http://codepen.io/GeoffStorbeck/full/RPbGxZ/ ...

The current object is not being referenced by this specific keyword

I am encountering an issue in my React application where I am trying to set the state of a child component using this.props, but it is showing an error saying props is undefined. It seems like 'this' is not referencing the current object correctl ...

The callback function for the `input` component in React Native must be a function and should not be undefined. Always remember to start component names with the proper syntax

There was a gap in my project as I have an application currently under development for testing purposes. Error: The view config getter callback for the component input must be a function (received undefined). Make sure to capitalize component names. I am ...

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

Is it possible to use JavaScript to toggle the visibility of the date picker when using the HTML5 input type=date?

Looking to personalize the HTML5 input type="date" element by integrating a separate button that triggers the visibility of the date picker dropdown. Struggling to find any information on this customization. Any assistance would be greatly valued! ...

I'm experiencing an issue where not all of the functions are loading in my JavaScript when using $

When attempting to redirect to a different URL with state.go, I am encountering an issue. $state.go("description-page", {disease: 'Thyroid'}); Currently, the page does not even scroll as expected. However, upon refreshing the page, the redirect ...

Codeigniter dropdown sending incorrect value to controller

When I choose an option from the dropdown list and click the submit button in the modal, the selected value is not being posted to the controller as expected. Below is my view code: <div class="form-group"> <div class="col-md-4"> ...

When creating a new instance of a class, I make sure to use the

I am facing an issue when trying to call a function from ClassA within my mainClass, and vice versa. I have attempted using .bind() and .call(), but it only works when I use .bind(this) or .call(this) on functions, not when I try to instantiate a new class ...

"Use Highcharts to visually compare the data from one month in two different years

How can I use Highcharts Columns to compare data from two different years within the same month? Check out the example image below: https://i.sstatic.net/8MMsA.png The data structure is as follows: myData[0] = { data1:"0.00", data2:"0.00", data3:"868.0 ...

How can one gain access to a specifically generated element?

In my task of dynamically generating multiple elements, I am facing an issue related to accessing specific ones. To illustrate this problem as simply as possible, I have provided the following code: $(document).ready(function() { var num1 = 0; v ...

I will not be accessing the function inside the .on("click") event handler

Can someone help me troubleshoot why my code is not entering the on click function as expected? What am I missing here? let allDivsOnTheRightPane = rightPane.contents().find(".x-panel-body-noheader > div"); //adjust height of expanded divs after addi ...

Error encountered with underscore template - Unforeseen SyntaxError: Unexpected token <

I encountered an error when attempting to load one of my underscore templates. It seems to be related to an issue in the for loop, which I suspect should be a .each loop, but I'm still trying to grasp its structure. Here is a snippet of my template: ...

jQuery shorthand conditional statements

I currently have a jQuery function that is triggered by two separate buttons. $("#btnSearch, #btnDirectorSearch").click(function () { The construction of the HTML output within this function relies on which button was clicked. To accomplish this, I am ut ...

Encountering the issue "unable to save user data" when attempting to modify a document

I am currently working on updating a document based on the provided code var express = require('express'); var router = express.Router(); var user = require('./user'); router.put('/:username/email', function(req, res, ne ...

Each time the server restarts, Express.js will run a function asynchronously

Looking for guidance on implementing a function in my Express.js app that can fetch data from the database and then cache it into Redis. The goal is to have this function executed only upon restarting the Web server. Any suggestions on how I can achieve t ...

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

extract elements from dataset

Attempting to splice an array but encountering index issues var kode_pelayanan = []; function deleteKodePelayanan(index){ kode_pelayanan.splice(index, 1); console.log(kode_pelayanan); } Experimented in the console with an array for kode_pelayanan ...

Is there someone who can assist me in transferring data from an Axios JSON response to plot points on a line chart using Chart js?

I'm currently in the process of developing a React application that includes a line chart showcasing the timeline of data recordings starting from a specific point in time up to the present day. To achieve this, I am leveraging the Chart.js JavaScript ...

JavaScript: The variable `scopes` is declared

I'm completely new to JavaScript. Can anyone help me understand why this code isn't working, and what changes I need to make to fix it? function getResults(keywords) { foo.foo = function() { var bar = foo.getSomeText; // ...