Question

我正在尝试创建一个动态表单，使用户能够创建填字游戏问题。我在考虑使用angularjs来允许用户在他们的答案中添加额外的行和列。在我的表单中，我创建了一个名为“answer”的输入，它有2个子元素行和列，“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();
    }
};

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>

表格中的双数组

1 个答案: