AngularJS - 在表中动态添加和删除表单字段

时间:2017-01-11 08:42:35

标签: javascript html angularjs forms

我想在按下按钮时动态添加几个表单字段,并将所有字段添加到表格中(每个字段都有自己的空格,如下所示: //News_list - is ArrayList String output = null; output = your Json string; JSONObject jsonResponse = new JSONObject(output); JSONArray movies = jsonResponse.getJSONArray(your json header); for (int i = 0; i < movies.length(); i++) { JSONObject actor = null; actor = movies.getJSONObject(i); String ID = null, Text = null, Data = null, Sender = null; ID = actor.getString("ID");//you json value tag Text = actor.getString("News_text"); Data = actor.getString("Data"); Sender = actor.getString("Sender"); int Attach = actor.getInt("Attach_count"); News_list.add(new ArrayList<String>()); News_list.get(PageViewActivity.News_list.size() - 1).add(ID); News_list.get(PageViewActivity.News_list.size() - 1).add(Text); News_list.get(PageViewActivity.News_list.size() - 1).add(Data); News_list.get(PageViewActivity.News_list.size() - 1).add(Sender); News_list.get(PageViewActivity.News_list.size() - 1).add(String.valueOf(Attach)); }

这是我迄今为止所拥有的,如果我将所有代码放在表中,它就不起作用。

HTML

<td>field</td>

JS

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choices">
      <select>
         <option>option 1</option>
         <option>option 2</option>
         <option>option 3</option>
      </select>
      <input type="text" ng-model="choice.name" name="" placeholder="Enter data">
       <input type="text" ng-model="choice.name" name="" placeholder="Enter data 2">
      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>

   <div id="choicesDisplay">
      {{ choices }}
   </div>
</div>

这是jsfiddle的链接: http://jsfiddle.net/rnnb32rm/1014/

1 个答案:

答案 0 :(得分:1)

我在您的示例中添加了表数据,我认为它可以正常工作吗?

您唯一需要做的就是将tr替换为td节点,然后将输入包装在table节点中 - 并将整个内容包装在{{1}中节点当然。

http://jsfiddle.net/9tk0qpng/1/