AngularJS - Retrieving an object with a button click

I have an array of objects with names displayed in input fields. I want to update the corresponding object with whatever the user fills in the input field when they click the button.

For example, if I enter “abcde” and “pq” in the input fields, the updated object should be displayed on button click.

[
    {
      name:'abcde’
    },
    {
      name:'pq'
    }
    ];

http://plnkr.co/edit/51BlTe5tAEgMV7ZlJLKV

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.c = [
    {
      name:'abc'
    },
    {
      name:'pqr'
    }
    ];

    $scope.onclick =function(){

      alert('dd')
      console.log($scope.c)
    }

});

Answer №1

Utilize ng-model within your template code

<li ng-repeat="x in c">
  <input type="text" ng-model='x.name' value="{{x.name==='abc'?'ddd':'hhh'}}"/>
</li>

If you wish to update $scope.c upon button click, utilize ng-model on a separate scope variable and then assign it to $scope.c in the onclick function

UPDATE:

Also, keep in mind that ng-model does not rely on the value attribute, so the logic x.name==='abc'?'ddd':'hhh' should be implemented in the onclick or ng-change event handler

Answer №2

Feel free to give this a try.

 <li ng-repeat="x in displayValue">
      <input type="text" ng-model='x.name' ng-change='valueChanged(x.name,$index)'/>
 </li>

In your controller, you can handle two different sets of JSON data - one for display purposes and one for actual values. This allows you to conditionally display "hhhh" and "dddd" based on specific criteria.

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.displayValue = [
    {
      name:'abc' == 'abc'? 'hhhh' : 'dddd'
    },
    {
      name:'pqr' == 'abc'? 'hhhh' : 'dddd'
    }
    ];

  $scope.actualValue = [
    {
      name: ''
    },
    {
      name:''
    }
    ];

    $scope.valueChanged =function(value,index)
    {
      $scope.actualValue[index].name =  value;
    }

    $scope.onclick =function(){

      console.log($scope.actualValue)
    }

});

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

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

Generating option list from API JSON responses

I am currently developing a news app using React. I have set up my API to fetch data from newsapi.org and my goal is to display the available news source options in a dropdown list within my select component. However, instead of listing all news sources w ...

How can state be efficiently communicated from a parent component to a child component in React?

As I embark on my first React project, I have encountered a recurring issue that has left me scratching my head. Whenever I pass state to a child component within an empty-dependency useEffect and then update the state, the child fails to reflect those cha ...

Encountered an AngularJS issue when attempting to utilize a factory from a separate file

Hello, I am facing an issue with two AngularJS files. The first file is a controller and the second is a factory function, but it is resulting in an 'unpr' error. The factory file contains: var app = angular.module('basicApi',[]); app ...

Modify the `<link>` tag using the `onclick` function in JavaScript

I want to switch up the site's style with just a click on an icon <head> <meta charset="utf-8"> <link rel="stylesheet" href="styled.css" id="styles"> </head> Everytime I try to tackle th ...

Assign the output of a function to a variable

I am trying to retrieve data from a function call in nodejs and assign it to a variable. The desired output should be "Calling From Glasgow to Euston", but I'm currently getting "Calling From undefined to undefined". Here is the code snippet: functi ...

Guide to preserving canvas state in React?

I am currently working on a drawing application that allows users to draw lines on a canvas. The functionality is such that the line starts drawing on the first click, continues as the mouse moves, and stops on the second click. However, each time a user ...

This function does not have the capability to save cookies

I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...

How can the dot badge in Material-UI be enlarged?

I'm in need of a badge component that serves as an indicator without displaying any values. I opted for the dot variant, but it's too small for my liking. I tried modifying it with CSS, but it doesn't seem to be working as expected. Any sugg ...

At all times, AJAX/PHP/JS will have a readyState of 1 and a Status of 0, with no text response

Recently, I've been attempting to utilize a sample of AJAX to compare form data with an SQL database from a domain at http://www.example.com. However, I'm encountering persistent issues where the readyState remains at 1 and the Status is always 0 ...

Send a file using ajax with the help of JavaScript and PHP

Currently, I am looking to implement a method for uploading files using Ajax and JavaScript/PHP without having the page refresh. My initial thought is to use Ajax to send the file using xmlhttp.send(file) and then retrieve it in the PHP script, but I' ...

Certain cases will see success with iPhone jquery/ajax functionality, while others may encounter

I am facing an issue with multiple pages in my project that utilize AJAX to submit a form to django. While the buttons work perfectly on various platforms and browsers like Chrome, Firefox, and desktop Safari, they seem to malfunction specifically on mobil ...

Fetching data in React using AJAX

I am in the process of developing a React Component that will display data retrieved from an AJAX call. Here's my scenario - I have a Jinja Flask back end hosted on AWS API Gateway, which requires custom headers and the Authorization header to serve H ...

From time to time, the web application encounters the error message net::ERR_NAME_NOT_RESOL

Currently, I am working on developing a simple web app card game. The concept is straightforward- users log in and begin playing by selecting three matching cards then hitting submit. When the submit button is clicked, the chosen cards' names are sent ...

Retrieve information from an API and assign the corresponding data points to the graph using Material UI and React

I have 4 different APIs that I need to interact with in order to fetch specific details and visualize them on a bar graph. The data should be organized based on the name, where the x-axis represents the names and the y-axis represents the details (with 4 b ...

Is there a way to ensure that the line numbers displayed for JavaScript errors in Chrome are accurate?

I suspect either my webpack configuration or my npm run dev script are causing the issue, but I'm unsure of what exactly is going wrong. While running my application in development mode, I encounter error messages like: Uncaught TypeError: this.props ...

Is there a way to conceal 'private' methods using JSDoc TypeScript declarations?

If we consider a scenario where there is a JavaScript class /** * @element my-element */ export class MyElement extends HTMLElement { publicMethod() {} /** @private */ privateMethod() {} } customElements.define('my-element', MyElement) ...

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Currently, I am working with a material-ui table https://i.stack.imgur.com/JIzLT.png and my goal is to pass selected rows to a function when the DELETE button is clicked. constructor(props) { super(props); this.state = { selecte ...

AngularJS: Double the power of Ajax. Can you assist me?

ajax was successful twice. Take a look. https://i.sstatic.net/QLdpT.png https://i.sstatic.net/zAbXW.png ...

What is the best way to store data retrieved from an asynchronous database callback in Nodejs with express?

After querying my sqlite3 database to verify user details, I encounter an issue when trying to store the retrieved data in a session variable or global instance. Despite being able to access the data within the callback function, it becomes undefined once ...