Можно ли иметь двойной массив в форме Angularjs? - PullRequest
4 голосов
/ 18 марта 2012

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

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

Мне удалось разрешить пользователям добавлять строки в своиответы, но я не могу отобразить элементы массива столбца вообще.Это потому, что с моими кодами что-то не так или Angularjs не допускает двойные массивы в своих формах?Извините, если мое объяснение не ясно.

1 Ответ

2 голосов
/ 18 марта 2012

HTML недействителен, вы не можете иметь 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>​

Вот jsfiddle с использованием последней версии Angular: http://jsfiddle.net/vojtajina/ugDpW/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...