使用ng-repeat为输入字段创建动态行

时间:2013-03-08 16:34:10

标签: javascript angularjs

对于angularjs来说很新,所以请原谅我,如果这很容易的话。

我想使用angularjs的ng-repeat为输入字段创建动态行。 基本上我有一个问题对象,我想为这个问题添加选项,默认情况下用户可以选择2行,但他/她可以添加更多选项来询问购买添加另一行。

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>

基本上我面临着两个问题:

  

如何使用ng-model添加具有2个输入(空)的新行,并在控制器中读取该ng-model?我不希望任何空字段的新选项,我想在数组中添加选项对象,当用户编辑这些输入字段时,值应该通过ng-model在控制器中更新

     

如何形成问题对象,以便我可以将其发送到服务器,其中问题对象具有作为选项数组的属性(自动映射应该起作用)

这是我在服务器端的模型,用于提问和选项..

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; }
}

1 个答案:

答案 0 :(得分:6)

接近它的最简单方法是使用新行的“option_new”模型:http://plnkr.co/edit/KERIO0