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

Question

table 页脚用于向 table 添加新记录。通过单击按钮添加后，新记录实际上被添加到 table 正文但最多一秒钟，之后整个页面重新加载并且插入的记录消失。

Table 是根据准备好的数据数组正确创建的。
删除记录没问题。

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

Table:

<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"}
];

Answer 1

引用MDN :

type
The type of the button. Possible values are: submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

意味着你需要将按钮 type 设置为 button 以防止页面被 "submitted" :

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

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

Adding a record to a dynamic table (using AngularJS) reloads the entire page

javascript

reload

dynamic-tables

angularjs

angularjs-ng-repeat