4

最近、プロジェクトでAngularjsを使用しています。ユーザーがクロスワードパズルの質問を作成できる動的なフォームを作成しようとしています。私は、angularjsを使用して、ユーザーが回答に行と列を追加できるようにすることを考えていました。私のフォームでは、2つの子要素の行と列を持つ「answer」という入力を作成しました。「column」にも独自の子要素があります。これは私がこれまでに行ったことです：

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

ユーザーが回答に行を追加できるようにできましたが、列配列の要素をまったく表示できません。これは、コードに問題があるか、Angularjsがフォームでの二重配列を許可していないためですか？説明がはっきりしない場合は申し訳ありません。

4

1 に答える 1

2

divHTMLが無効であるため、テーブル内に含めることはできません。

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

最新のAngularを使用したjsfiddleは次のとおりです：http：//jsfiddle.net/vojtajina/ugDpW/

于 2012-03-18T18:04:40.897 に答える