4

我最近一直在我的项目中使用 Angularjs。我正在尝试创建一个动态表单，使用户能够创建填字游戏问题。我正在考虑使用 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();
    }
};

我已经设法允许用户在他们的答案中添加行，但我根本无法显示列数组的元素。这是因为我的代码有问题还是 Angularjs 不允许在其形式中使用双数组？对不起，如果我的解释不清楚。

4

1 回答 1

2

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

这是使用最新 Angular 的 jsfiddle：http: //jsfiddle.net/vojtajina/ugDpW/

于 2012-03-18T18:04:40.897 回答