capturing the form data inside the Angularjs controller

Question

I am new to Angularjs. I am having the form data which I need to make a post request to the server passing the data. I have done the UI and controller part inside the angularjs but do not know how to capture the form data. Please find the link to plnkr - Plnkr link

By clicking the add button, a new li element gets added and the same gets deleted when the minus sign is clicked. I need to get all the key value items into the below format for sending for Post request.

{
  "search_params": [
  {
    "key": "search string",
    "predicate": "matches",
    "value": "choosen text"
  },
  {
    "key": "search string",
    "predicate": "not-matches",
    "value": " search value"
  },
  {
    "key": "search string",
    "predicate": "matches",
    "value": " search value"
  }
]

}

How to capture the form data and construct the param object inside my controller inside the searchParams function inside the controller. Please let me know as I am new to Angularjs.

Updated Question Based on the inputs, I am able to get the user details in the controller. But there are few things:

By default there will be one li element and when the user submits, the current li elements data should be captured in the controller.
Only when I add the criteria using the plus button, the array is getting updated, but the last elements data is not being updated in the model when submitted.
The same is holding good for the deleting the criteria too.

Link to updated Plunker - Plnkr Link

This might help you get going plnkr.co/edit/h1afP3TI2jrrYGQFUPOf?p=info — Tushar
– Tushar, Commented Dec 8, 2015 at 10:53
I verified your plunkr but some conditions not not working. Have updated the question — zilcuanu
– zilcuanu, Commented Dec 9, 2015 at 2:09

Vasu Sheoran · Accepted Answer · 2015-12-08 12:22:17Z

1

Expanding on @Chris Hermut and assuming you want an array of map, according to json you posted. You can do that by

 var arr = [];
  var form = {
    name: 'asd',
    surname: 'aasdasdsd',
    wharever: 'asd'
  }
  arr.push(form);

  //prentending to be another (key,value)
  form.surname = 'hfg';

  arr.push(form);

here's a fiddle illustrating just that.

edited Dec 8, 2015 at 12:22

answered Dec 8, 2015 at 12:16

Vasu Sheoran

2151 silver badge6 bronze badges

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

Comments

Mr Lister · Accepted Answer · 2015-12-13 21:58:09Z

0

Directives like <select>, <input> require ng-model attribute to correctly bind your input to $scope properties.

In your HTML markup you'll have to update your form elements with required attributes (like ng-model).

I would recommend (in controller/link) to use only one object for form data with different properties like

var form = {
    name: '',
    surname: '',
    wharever: ''
}

Corresponding <input> would be ex. <input ng-model="form.name" type="text">

After you have your 'form' object populated you can do JSON.stringify(form) before your request (if your using some other content-type then application/json).

edited Dec 13, 2015 at 21:58

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 8, 2015 at 10:43

Chris Hermut

1,7564 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

capturing the form data inside the Angularjs controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related