Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

Very new to angularjs, so please forgive me if it is easy one.

I want to create dynamic rows for input fields, using angularjs's ng-repeat . basically i have a question object, and i want to add options to that question, by default user will have 2 rows for option, but he/she can add more options to question buy adding another row.

Jsfiddle

<div nd-repeat="option in question.options">
      <label>{{$index+1}}</label>
          <input type="text" ng-model="option.number" ng-change="change()" />
      <input type="text" ng-model="option.description" ng-change="change()" />
      <br/>
  </div>

basically i am facing 2 problems:

How should I add the new row having 2 inputs(empty) with ng-model, and read that ng-model back in controller? I do not want to new option with any empty fields, i want to have option object get added in array, and when user edits those input fields, the values should get updated in controller through ng-model

How to form the question object so i can send it to server where question object has a property as array of options (the auto-mapping should work)

here are my models at server side for question and option..

public class Option
{
    public int Number { get; set; }
    public string Description { get; set; }
}

public class Question
{
    public int Id { get; set; }
    //....opther properties
    public Option[] Options { get; set; }
}
share|improve this question
up vote 5 down vote accepted

The simplest way to approach it is with an "option_new" model for the new row: http://plnkr.co/edit/KERIO0

share|improve this answer
    
thanks for your answer, but actually in my case.. i do not want to initialize an option with empty fields in controller..is there any way to do it.. – Rahul R. Mar 8 '13 at 20:44
    
So you're wanting a "show more options" functionality? – Sharondio Mar 8 '13 at 20:52
    
yes that i want..but for that new row..i dont want to initialize the values with anything...just want to give ng-model in html..and if user enters something there the $scope will be having that row...just as it happens in most scenarios.. – Rahul R. Mar 8 '13 at 20:54
    
You could also initialize the $scope.question.options array with an empty option which would be part of the model. You'd have to decide how to trigger the update back to the datasource and check for empty values. – Sharondio Mar 8 '13 at 20:56
    
thats what i am trying to do in my fiddle...trying to push empty option..but whenever values are entered in html..it should have those.. var option={ number:$scope.question.option.number, description:$scope.question.option.description, } $scope.question.options.push(option); – Rahul R. Mar 8 '13 at 21:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.