Filling form fields with array data (AngularJS)

Although I'm new to AngularJS, I'm struggling to figure out how to handle a list of arrays returned from the searchAll function.

console
    0: {mobile: "12345678", lastname: "last01", firstname: "first01"}
    1: {mobile: "87654321", lastname: "last02", firstname: "first02"}
    ...

I want to populate these arrays into separate input fields using

ng-repeat="client in ctrl.clients"

<input ... ng-model="ctrl.client.firstname"
<input ... ng-model="ctrl.client.lastname"
<input ... ng-model="ctrl.client.mobile"

When I try to display the data as text by populating the following:

<li>First name: {{client.firstname}}</li>
<li>Last name: {{client.lastname}}</li>
<li>Mobile: {{client.mobile}}</li>

Ideally, the data should be shown within the input fields.

Any suggestions on how to achieve this would be greatly appreciated!

Answer №1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">

  <div  ng-controller="myCtrl as ctrl">
    <div ng-repeat="client in ctrl.clients">
      <input type="text" ng-model="client.firstname" />
      <input type="text" ng-model="client.lastname" />
      <input type="text" ng-model="client.mobile" />
    </div>
    <pre>{{ctrl.clients | json}}<pre>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function() {
      this.clients = [{
        mobile: "12345678",
        lastname: "last01",
        firstname: "first01"
      }, {
        mobile: "87654321",
        lastname: "last02",
        firstname: "first02"
      }];
    });
  </script>

</body>

</html>

If you're looking to populate the object provided, please check out the code snippet above. I've included a <pre> tag to display the live object.

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

Struggling to create a foreach loop for a multi-dimensional array containing StdClass Objects

Currently, I am diving into PHP and CodeIgniter with little experience in modern programming. Thus, I would appreciate any kind guidance you could offer! I recently crafted a function to compute weekly totals of kilometers cycled on a bike from a MySQL ta ...

What could be causing useEffect to trigger only after the component has been mounted in NextJS?

I'm currently encountering an issue with my implementation of a useEffect function that is supposed to act like a componentWillMount, but the behavior is not as expected. Within the code for Component (as demonstrated in the Codesandbox provided belo ...

Flipped the dimensions of an image for better responsiveness

Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

Applying onclick css changes to a specific duplicate div among several others?

Recently, I encountered a situation where I have multiple identical divs on a page. <div class="class" ng-click="example()"></div> With the use of Angular 1.6.4 and jQuery, these divs are styled with background color and border color. Now, w ...

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

What is the method for including an inner wrapper around an element in Angular?

Is there a way to create an Angular directive that adds an inner wrapper to a DOM element without replacing the inner content? I have tried implementing one, but it seems to be replacing instead of wrapping the content. (view example) Here is the HTML sni ...

Unusual Outcome from Observable.interval() Combined with flatMap()

When attempting to chain Observable.interval() with .flatMap(), I encountered what seems to be unexpected behavior. Below is the code snippet I am using (with Angular 2): Observable.interval(1500) .scan((numArr:any[], curr:any, i:number) => { nu ...

The Art of Validating Forms in Vue.js

Currently I am in the process of developing a form with validation using Vue, however, I've run into some errors that are showing up as not defined even though they are currently defined. HTML <form class="add-comment custom-form" @submit="checkF ...

Exploring VueJS watchers: How to get started?

Struggling to grasp the concept of Watchers in VueJS, particularly when trying to implement them for tracking tab changes and resetting values. Even though I have set up a watch with parameters like `oldValue` and `newValue`, their usage remains unclear to ...

Disable the javascript link on small devices

I currently have a javascript link (Trustwave) on my desktop website theme that I need to deactivate when viewed on mobile devices: Located in footer.tpl: <div style="position:absolute; margin-left:100px; margin-top:50px"> <script type="text/j ...

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

Unexpected behavior encountered with Angular module dependency injection

Having some difficulty managing dependencies for my node app. Here's the current structure: app.js var app = angular.module('myApp', ['myController', 'myFactory', 'rzModule', 'chart.js', 'myServ ...

New update: Adjusting the chart by using the slider to modify the date values on the x-axis

Update: I have made changes to the question, the issue with values not appearing on the x-axis has been resolved. Now, as the slider is moved, the data on the graph remains constant and I can see changing x values. I am currently working on incorporating ...

encountering a problem with iterating through a JSON array

After making an ajax call and retrieving select options in json format, I implemented the code below to display these new options in place of the existing ones: success: function (data){ var $select = $('#dettaglio'); $select.html(' ...

Display and conceal frequently asked questions using JQuery

I'm currently facing an issue with using JQuery to toggle between showing and hiding content when a user clicks on a specific class element. Here is my HTML code: <div class="faqSectionFirst"> Question? <p class="faqTextFirst" style=' ...

Personalized FullCalendar header title

Is there a way to display a unique header title for each calendar in my collection of 16? I've been trying various modifications to the code snippet below with no success: firstDay: <?php echo $iFirstDay; ?>, header: { left: 'prev,next ...

Is it possible to configure Cypress to always open in the current tab instead of opening in a new tab?

One challenge with Cypress is testing on multiple tabs. Our website default to opening in a new tab. Is there a way to make Cypress continue the tests on the same tab? cy.get(element).invoke('attr', 'target', '_self').click() ...

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

The data array is currently structured in this way. I have attempted various methods but have not been able to find a suitable solution. I need to send the JSON below via an AJAX request, however, I do not want the keys 0 and 1 in both child arrays. [sch ...

Trouble arises when adding a .js script to the webpage

I'm feeling quite puzzled by this small piece of code, as it appears to be the simplest thing you'll come across today. Despite that, I can't help but seek guidance because I've been staring at it for what feels like an eternity and can ...

Can Googlebot detect changes made to an HTML <title> tag using JavaScript?

Within my website, I have a search engine that operates using ajax technology. My goal is to assign a unique <title> for every search request made. This involves modifying the title each time I receive a response from the ajax feature. I am wonderin ...