时间戳

首页 > 解决方案 > 删除我在模式上附加的内容

angularjs - 删除我在模式上附加的内容

问题描述

我有一个模式，根据选择显示新数据。问题是，当我关闭模式时，它不会清除它只是附加在它上面的旧数据。理想情况下，我不会在每次按下关闭按钮时清除模式。这是我尝试过的，但它不起作用。

    $scope.onCloseModal = function() {
    table = angular.element('#table-services');
    table.remove();
   }

这是附加到 html 的循环。

    angular.forEach($scope.payment_transaction_services,function(value,index) {
        var tr = angular.element('#table-services').append
        ('<tr>' + 
           '<td>' + value.title + '</td>' +
           '<td>' + value.delivered_by + '</td>' + 
           '<td>' + value.status + '</td>' + 
           '<td>' + value.delivery_date + '</td>' + 
         '</tr>'
        );
    })

这是我的模态。

    <div id="view-service-status" class="modal fade role="dialog">
<div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h2 class="modal-title">Service Status</h2>
            </div>
            <div class="modal-body">
                <table class=" table table-bordered" id = "table-services">
                    <tr>
                        <th> <b> Service </b> </th>
                        <th> <b> Delivered By </b> </th>
                        <th> <b> Status </b> </th>
                        <th> <b> Delivered At </b> </th>
                    </tr>                        
                </table>
            </div>
            <div class="modal-footer view-service-status">
                <button type="button" class="btn btn-default"  data-dismiss="modal" ng-click="onClose()" class="close">Close</button>
            </div>
    </div>
 </div>

标签： angularjs

解决方案

发生这种情况是因为您只需删除并再次获得相同的元素而不做任何更改。在追加新数据之前尝试清空#table-services 元素。

像这样的东西：

var tr = angular.element('#table-services');
tr.empty();
    angular.forEach($scope.payment_transaction_services,function(value,index) {
    tr.append
    ('<tr>' + 
       '<td>' + value.title + '</td>' +
       '<td>' + value.delivered_by + '</td>' + 
       '<td>' + value.status + '</td>' + 
       '<td>' + value.delivery_date + '</td>' + 
     '</tr>'
    );
})

推荐阅读