Is it possible to have a double array in the form of Angularjs?

Question

I recently used Angularjs in my project. I am trying to create a dynamic form that allows users to create crosswords. I was thinking of using angularjs so that users can add extra rows and columns to their answers. In my form, I created an input called an "answer" that has 2 children in a row and column, and a "column" has its own child. This is what I have done so far:

html page:

Answer for the question: [<a href='' ng:click='form.answer.$add()'>AddRow</a>] <table> <div ng:repeat='ans in form.answer'> <tr> <td>{{ans.row}}</td> <div ng:repeat='col in ans.column'> <td><input type='text' name="col.word" ng:required/></td> </div> [<a href='' ng:click='col.$add()'>AddCol</a>] </tr> </div> </table> 

JavaScript:

 questionCtrl.$inject = ['$invalidWidgets']; function questionCtrl($invalidWidgets) { this.$invalidWidgets = $invalidWidgets; this.master = { title: 'title', descr:'description here', answer: [{row:'1', column:[{word:'z'},{word:'x'}]} ,{row:'2', column:[{word:'a'},{word:'w'}]} ], user:'' }; this.cancel(); } questionCtrl.prototype = { cancel : function(){ this.form = angular.copy(this.master); }, save: function(){ this.master = this.form; this.cancel(); } }; 

I managed to allow users to add rows to their answers, but I can’t display the column array element at all. Is it because there is something wrong with my codes or Angularjs does not allow the use of double arrays in their forms? Sorry if my explanation is not clear.

Answer 1

Invalid html, you cannot have a div inside a table.

 <table> <tr ng:repeat='ans in form.answer'> <td>{{ans.row}}</td> <td ng:repeat='col in ans.column'><input type='text' name="col.word" ng:required/></td> <td>[<a href='' ng:click='ans.column.$add()'>AddCol</a>]</td> </tr> </table>​ 

Here is jsfiddle using latest Angular: http://jsfiddle.net/vojtajina/ugDpW/