将记录添加到动态表（使用 AngularJS）会重新加载整个页面答案

【问题标题】：Adding a record to a dynamic table (using AngularJS) reloads the entire page将记录添加到动态表（使用 AngularJS）会重新加载整个页面
【发布时间】：2018-04-13 04:41:19
【问题描述】：

表格页脚用于向表格添加新记录。点击按钮添加后，新记录实际上添加到表体中，但最多一秒钟，然后重新加载整个页面，插入的记录消失。

表是从准备好的数据数组中正确创建的。
删除记录工作正常。

哪里有问题？我不想重新加载页面。

表：

<table class="table">
            <thead>
            <tr>
                <th>Nazwa tchnologii</th>
                <th>Poziom zaawansowania</th>
                <th>-</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <!--Text for new record-->
                <th><input type="text" ng-model="nazwaTechnologii" class="form-control"></th>
                <!--Button to add-->
                <th><button ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button></th>
            </tr>
            </tfoot>

            <tbody id="cialoTabeli">
            <tr ng-repeat="technologia in technologie track by technologia.id" id="{{technologia.id}}">
                <td>{{technologia.nazwa}}</td>
                <!--Button to remove-->
                <td><input type="button" ng-click="usunTechnologie(technologia.id)" class="btn btn-danger btn-sm">Usuń!</input></td>
            </tr>
            </tbody>
 </table>

一段代码 JavaScript/AngularJS：

var indeks = 5;
$scope.dodaj = function () {
      $scope.technologie.push({ 'id': ++indeks, 'nazwa': $scope.nazwaTechnologii});
      $scope.nazwaTechnologii='';
};

$scope.technologie = [   //prepared values
    {"id":1,"nazwa":"C++"},
    {"id":2,"nazwa":"java"},
    {"id":3,"nazwa":"Python"},
    {"id":4,"nazwa":"C"}
];

【问题讨论】：

我们能看到更多的 HTML 和控制器代码吗？我在 plunker (plnkr.co/edit/gVdUeAKX8WAu3w0MCW21) 中尝试了您的代码，它似乎工作正常，因此可能还有其他问题 - 可能您将所有这些都包含在表单中并且不小心提交了表单。

标签： javascript angularjs angularjs-ng-repeat reload dynamic-tables

【解决方案1】：

引用MDN：

类型
按钮的类型。可能的值是：提交：按钮将表单数据提交给服务器。 这是默认设置，如果属性未指定，或者如果属性是动态的更改为空值或无效值。

表示您需要将按钮type设置为button，以防止页面被“提交”：

<button type="button" ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button>

【讨论】：