Formsets in AngularJS

74 views
Skip to first unread message

Suma Mallikarjunaiah

unread,
Mar 28, 2014, 3:23:40 PM3/28/14
to ang...@googlegroups.com
Hello,

I am a newbie to angularJS and I need help with one of the requirements that I have.

I am using MEAN stack with bootstrap for front end coding.  I have a subject section which has few sub fields in it.

subject:[{
   firstName
   lastName
   DOB
   age
   phoneNumber
   email
}]

And we can have multiple subject entries..So subject will be like an array of objects.  How can I :-
1.  Define this in mongoDB.
2.  Push data into this angular way
3.  Retrieve it and show to the users.

Also subject section has a button and clicking it should open up another section with same set of fields and users can enter multiple subjects.

It should behave like a FormSet. 

SUBJECT
        0-
           firstName
           lastName
           DOB
           age
           phoneNumber
       1-
          firstName
           lastName
           DOB
           age
           phoneNumber
      2-
         firstName
           lastName
           DOB
           age
           phoneNumber
           email

I would appreciate any help in this regards.

Thanks in advance.

-Suma

CONFIDENTIALITY/EMAIL NOTICE: The material in this transmission contains
confidential and privileged information intended only for the addressee.
If you are not the intended recipient, please be advised that you have
received this material in error and that any forwarding, copying, printing,
distribution, use or disclosure of the material is strictly prohibited.
If you have received this material in error, please (i) do not read it,
(ii) reply to the sender that you received the message in error, and
(iii) erase or destroy the material. Emails are not secure and can be
intercepted, amended, lost or destroyed, or contain viruses. You are deemed
to have accepted these risks if you communicate with us by email. Thank you.

Kamal

unread,
Mar 29, 2014, 1:17:03 AM3/29/14
to ang...@googlegroups.com
Hi Suma,

The simplest way is using ngRepeat(http://docs.angularjs.org/api/ng/directive/ngRepeat) have look at the example in the docs. Push an element into the array to which its bound would display an new row. For retrieving and showing you have two choices using AJAX/REST $http (http://docs.angularjs.org/api/ng/service/$http) & $resource (http://docs.angularjs.org/api/ngResource/service/$resource) service available in angular. As far as DB goes i am not to keen on MongoDB but you can store each subject object asis from screen which not be a problem with MongoDB. Hope this help, let me know if you need an detailed example.

Regards,
Kamal

Suma Mallikarjunaiah

unread,
Mar 29, 2014, 7:16:01 AM3/29/14
to ang...@googlegroups.com
Kamal,

Can you please send a detailed example?

Thanks for your response.

Thanks
Suma

Sent from my iPhone
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/mCo4baM9XS8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Kamalakar Gadireddy

unread,
Mar 29, 2014, 1:56:27 PM3/29/14
to ang...@googlegroups.com
Suma,

Here are are the plnkr's http://plnkr.co/edit/aGlMsDt5G9gig7vSFdS9?p=preview for generating the table for subjects adding a new subject and sending the added subjects back to the server suing AJAX/REST by $http service (NOTE:  The data and HTTP responses are is mocked up using $httpBackend service). This is only a simple logic example, assuming you can add by clicking a button and save only the newly added elements by clicking an other button.
http://plnkr.co/edit/JVHFWU?p=preview is an plnkr on how to bind and array of objects to input/textareas.

Regards,
Kamal
--
Thanks,
Kamalakar Gadireddy
Reply all
Reply to author
Forward
0 new messages