Двойной массив в форме

Question

Я пытаюсь создать динамическую форму, которая позволяет пользователям создавать кроссворды. Я думал использовать angularjs, чтобы пользователи могли добавлять дополнительные строки и столбцы в свои ответы. В моей форме я создал вход, называемый «ответ», который имеет 2 дочерних элемента строки и столбца, а «столбец» имеет собственный дочерний элемент.

Это мой HTML-страница:

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

Answer 1

вы не можете иметь Div внутри таблицы.

 <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>​