javascript - 将记录添加到动态表(使用 AngularJS)会重新加载整个页面

Question

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

• 表格是根据准备好的数据数组正确创建的。
• 删除记录效果很好。

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

表:

<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以防止页面被“提交”:

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