How to modify data in a particular object using angularJS

Question

let for an instance

    {
    "E-mail Address": "[email protected]",
    "Related name": "",
    "Home Address 2": "",
    "Anniversary": "",
    "First Name": "Rios",
    "Business Address 2": "",
    "Department": "",
    "Display Name": "Baker Adkins",
    "Home State": "",
    "Business Country": "",
    "Home Street": "",
    "Birthday": "",
    "Home Country": "",
    "Pager": "",
    "Categories": "",
    "Home City": "",
    "E-mail 3 Address": "[email protected]",
    "Home Fax": "",
    "Gender": "",
    "Notes": "proident",
    "Country Code": "",
    "Job Title": "",
    "Business Address": "",
    "Web Page 2": "",
    "Mobile Phone": "",
    "Organization": "",
    "Home Phone": "(962) 514-3534",
    "E-mail 2 Address": "[email protected]",
    "Last Name": "Fisher",
    "Nickname": "",
    "Business Fax": "",
    "Home Postal Code": "",
    "Business Phone": "",
    "Business Postal Code": "",
    "Web Page": "",
    "Business City": "",
    "Business State": ""
  }

   <input ng-model="disName" type="text">

this is a specific object in a array of objects. How can I modify a specific value for a key for suppose [key = Display Name] and with change in input value how can I modify it in object?

sminutoli · Accepted Answer · 2018-11-30 03:24:15Z

1

In angularJS you'll bind the object property to the input using ng-model. There's no need to listen any change, because the framework takes care of that.

¿Who provides this object to the <input>? The controller, exposing the object through this.

Here's a working example using components.

https://plnkr.co/edit/lfD1LgML0nuRURKX4DCw?p=preview

As you can see, you'll need to use bracket notation because of the use of spaces on your object keys...

<input ng-model="$ctrl.obj['Display Name']">

On a real world example, I suppose your data will be provided using a service, as you can see in this example:

https://plnkr.co/edit/fp1fBC59dJLettJBvD2p?p=preview

Hope it helps!

edited Nov 30, 2018 at 3:24

answered Nov 30, 2018 at 3:16

sminutoli

8414 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sasi Pranay Over a year ago

/*HTML: */ <input ng-model="firstName" type="text" class="editable">

/*Angular: */   var contactToEdit = outText.find(x => x["Display Name"] === $scope.disName);    contactToEdit["First Name"] = $scope.firstName;

What if I do this way. Isn't it an effective approach

sminutoli Over a year ago

but when do you tell angular to do the assignment? if you're thinking on ng-change, that's we wanted to avoid, and that's what ng-model is for...

Collectives™ on Stack Overflow

How to modify data in a particular object using angularJS

1 Answer 1

2 Comments

Hot Network Questions