Question

我正在编写angularJS Web应用程序。在我的主页面中，我有一个包含一行（药物，期间，剂量）标签的表格。我想用一个按钮（添加药物）动态地向表添加行，其内容与第一个完全相同

我成功地做到了。但是我的解决方案看起来并不理想。

在我下面显示的HTML页面中，我在每行中添加了ng-repeat for row。

 <table class="table">
    <tr ng-repeat="row in rows">
        <td>
            <label>{{row.drug}}
            </label>
        </td>
        <td>
            <label>{{row.dose}}
            </label>
        </td>
        <td>
            <label>{{row.period}}
            </label>
        </td>
    </tr>
</table>

在我的控制器中，我必须在addRow（）函数中指定添加的每个作用域的名称，即使在$ scope.rows中定义时已经给出了字符串名称。所以我重复同样的步骤。

 $scope.rows = [
                    {   'drug': "Drug",
                        'dose':'Dose',
                        'period': "Period",
                        }];

    $scope.addRow = function() {

        $scope.rows.push({'drug': "Drug", 'dose': "Dose", 'period': "Period});

    }

什么是更好的理想解决方案？

Answer 1

您可以创建第一条记录的副本并将其添加到集合中：

REPLACE

Answer 2

您可以使用angular.copy（）;

$scope.rows = [
    {   
        'drug': "Drug",
        'dose':'Dose',
        'period': "Period",
    }
];

$scope.addRow = function() {

    $scope.rows.push(angular.copy($scope.rows[0]));

}

Answer 3

在我的控制器中，我必须在addRow（）函数中指定名称添加的每个范围，即使已经给出了一个字符串名称在$ scope.rows中定义时。所以我重复同样的步骤。

我认为你指的是你觉得指定下面突出显示的部分感觉就像重复一样。

$ scope.rows.push（{'药物'：“药物”，“剂量”：“剂量”， '期间'：“期间}）;

我不一定是坏人。您正在做的是将新对象插入行集合中。当你插入一个新对象时，你显然想要指定对象属性，这正是你正在做的

{'drug': "Drug", 'dose': "Dose", 'period': "Period}

你可以使它更明确 - 比如为Drug创建一个构造函数，或插入一个空对象并在视图中将默认值设置为Drug，Dose和Period（我假设是占位符）。

在angularJS中向表中添加行的更好解决方案

3 个答案: