Question

I’ve recently been using Angularjs in my project. I’m trying to create a dynamic form which enables users to create crossword puzzle questions. I was thinking of using angularjs to allow users to add additional rows and columns into their answers. In my form, I’ve created an input called “answer” which has 2 child element row and column, and “column” has it’s own child element as well. 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’ve manage to allow users to add rows to their answers, but I can’t display the column array’s element’s at all. Is this because there is sonething wrong with my codes or Angularjs does not allow double arrays in their forms? Sorry if my explanation isn’t clear.

Answer 1

The html is invalid, you can’t have div inside 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/