AngularJS 在 Bootstrap 模态表单中插入新记录后智能刷新 table

Question

我使用 angular-bootstrap 和 Angular 智能 table。我有一个模态表单，可以将新记录添加到数据库并在我的智能 table 中显示列表。添加新记录工作正常，但是如何在将新记录插入数据库后刷新我的智能 table。

控制器

//ajax request to gather data and list in smart table
october.controllers['dashboard/feeds'] = function ($scope, $filter , $request, $modal, $log, $http) {

    $scope.api = $request('onFeeds', {success: function(data, scope){
        this.success(data).done(function() {
            $scope.rowCollection = [];
            $scope.rowCollection = angular.fromJson(data.result);
            $scope.displayedCollection = [].concat($scope.rowCollection);


            });
        }
    });
}

//Modal

var ModalInstanceCtrl = function ($scope, $modalInstance,  $request, $filter) {


    $scope.save = function (data) {

        $request('onAddFeed',

        {data:data, 
                success: function(data){
                this.success(data);
                    $scope.refresh();
                    $modalInstance.close();

            }
        });

    };
};

模板

        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">neue Feed eintragen!</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                  <input type=hidden ng-init="formInfo.user_id = {% endverbatim %} {{ user.id }} ">  
                  {%verbatim %}
                  <div class="form-group">
                    <label for="inputName3" class="col-sm-2 control-label">Feed Name</label>
                    <div class="col-sm-8">
                      <input class="form-control" id="inputName3" placeholder="Feed Name" ng-model="formInfo.name">
                  </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Feed Type</label>
                <div class="col-sm-8">
                  <select ng-model="formInfo.feed_type" class="form-control">
                      <option>Select Feed Source</option>  
                      <option value="api">API</option>
                      <option value="xml">XML</option>
                      <option value="csv">CSV</option>
                      <option value="json">JSON</option>
                      <option value="upload">Upload</option>
                  </select>
              </div>
        </div>

        <div class="form-group" ng-show="formInfo.feed_type =='api'">
            <label for="selectAPI" class="col-sm-2 control-label">Select API</label>
            <div class="col-sm-8">
              <select ng-change="selectAction(item.id)" ng-model="formInfo.network_id" ng-options="item.id as item.name for item in networks" class="form-control"> </select>
            </div>
        </div>

        <div class="form-group" ng-repeat="setup in setups">
            <label for="setup" class="col-sm-2 control-label">{{setup}}</label>
            <div class="col-sm-8">
                <input ng-model="formInfo['api_credentials'][setup]" class="form-control" placeholder="Enter your {{setup}}">

         </div>
        </div>

        <div class="form-group" ng-show="formInfo.feed_type =='xml' || formInfo.feed_type =='csv' ">
            <label for="inputPassword3" class="col-sm-2 control-label">Source</label>
            <div class="col-sm-8">
                <div class="input-group">
                  <div class="input-group-addon"><i class="fa fa-link"></i></div>
                <input ng-model="formInfo.source" type="text" class="form-control" id="sourceInput" placeholder="URL">
        </div>

      </div>
  </div>
</div>
<span>{{formInfo}}</span>
</form>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary" ng-click="save(formInfo)">Save</button>
    <button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>

Answer 1

{data:data, 
            success: function(data){
            this.success(data);
                $scope.refresh();
                $modalInstance.close();

        }

In the above code Instead of $scope.refresh() use $route.reload() to Update the records before closing Modal Instance.

reload() 使 $route 服务重新加载当前路由，即使 $location 没有改变

Answer 2

对我有用的（并且似乎是你的问题）是将 displayedCollection 设置为一个空数组。 Smart Table 将用您指定的任何分页、过滤或排序数据填充它。像这样：

<table st-table="displayedCollection" st-safe-src="rowCollection">

突然之间，rowCollection.push(data) 自动更新了 Smart Table。

Answer 3

要刷新智能-table，您可以添加或删除项目或只是重新创建数组。

$scope.tableData = [].concat($scope.tableData);

AngularJS 在 Bootstrap 模态表单中插入新记录后智能刷新 table

AngularJS refresh smart table after inserting new record in Bootstrap Modal Form

angularjs

angularjs-directive

angular-bootstrap

smart-table