我有角形JS表单，它已将数据成功插入数据库，但未显示在表单下方的列表中

Question

I have an HTML form that is inserting successfully data into a database, but is not showing the data in the table below it. The only way to check we have to use is to manually refresh the page. The same happen with delete, sometimes a dialog is shown, telling us that value was deleted, but we still have two referesh the page to see the change. Is there any fucntion to reload that listing? Any help would be appreciated

Here is my angular html Named as : manage_features.html

 <!-- START panel--> <div class="panel panel-default"> <div class="panel-heading"> <h3>Manage Features Name</h3> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label class="col-lg-2 control-label">Name</label> <div class="col-lg-10"> <input type="text" ng-model="rec.Name" placeholder="Name" class="form-control"> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <div class="checkbox c-checkbox"> <label> <input type="checkbox" ng-model="rec.isSpecial"> <span class="fa fa-check"></span>is Special</label> </div> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <div class="checkbox c-checkbox"> <label> <input type="checkbox" ng-model="rec.isMultiple"> <span class="fa fa-check"></span>Is Multiple</label> </div> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="button" ng-click="add(rec)" class="btn btn-sm btn-default">ADD</button> </div> </div> </form> </div> </div> <!-- END panel--> 

here is my JS file named as manage_features.js

 $scope.add = function(rec){ console.log(rec); $scope.upload = $upload.upload({ url: 'api/AdminArea/feature/add', //upload.php script, node.js route, or servlet url method: 'POST', headers: {'header-key': '83c238df1650bccb2d1aa4495723c63f07672ee8'}, withCredentials: true, data:{data:rec}, }).success(function(data, status, headers, config) { console.log(data); return false; toaster.pop('success', 'Add', 'Record added successfully.'); $scope.$root.$broadcast("myDocEventReload", {}); }); }; 

here is delete function

 $scope.delete = function (id) { console.log(id);//return false; ngDialog.openConfirm({ template: 'modalDeleteDialogId', className: 'ngdialog-theme-default' }).then(function (value) { $http .post('api/AdminArea/feature/delete', {id:id}) .then(function (res) { console.log(res.data); if(res.data != 1){ toaster.pop('success', 'Deleted', 'Record deleted successfully.'); } else{ toaster.pop('error', 'Deleted', 'Record can\\'t be deleted!'); } }); }, function (reason) { console.log('Modal promise rejected. Reason: ', reason); }); //if(popupService.showPopup('Would you like to delete?')) { // } }; 

Answer 1

The main point, that I can basically see in your code, is that the object 'rec' is used 'freely' and for this reason when you receive the response from the server you are not populating the correct object.

The reason for this is that when you are calling .then(function (res) { the 'res' variable is confined in the scope of that particular function, and won't change the value of the scope variable.

my advice is to do something like this:

create a controller

angular.module('mymodule',[]).controller('myCtrl',['$upload','toaster' function($upload, toaster){
    var self = this;
    self.rec = {};

    self.add = function(){
        $upload.upload({
        url: 'api/AdminArea/feature/add', //upload.php script, node.js route, or servlet url 
        method: 'POST', 
        headers: {'header-key': '83c238df1650bccb2d1aa4495723c63f07672ee8'}, 
        withCredentials: true, 
        data:{data:self.rec},
      }).success(function(data, status, headers, config) {
        /* THIS RETURN WAS BLOCKING THE NEXT, YOU HAVE TO REMOVE IT
        console.log(data);
        return false;*/

                 toaster.pop('success', 'Add', 'Record added successfully.');
                 /*$scope.$root.$broadcast("myDocEventReload", {});*/

      });
    }

    self.delete = function(id){
        console.log(id);//return false;
        ngDialog.openConfirm({
            template: 'modalDeleteDialogId',
            className: 'ngdialog-theme-default'
        }).then(function (value) {
            $http
                .post('api/AdminArea/feature/delete', {id:id})
                .then(function (response) {
                    console.log(response.data);
                    if(response.data != 1){
                        toaster.pop('success', 'Deleted', 'Record deleted successfully.');


                    }
                    else{
                        toaster.pop('error', 'Deleted', 'Record can\'t be deleted!');

                    }
                });
        }, function (reason) {
            console.log('Modal promise rejected. Reason: ', reason);
        });
     };
}

Then you can use this controller in your code with

<div ng-controller='myCtrl as c'>
    <input type="checkbox" ng-model="c.rec.isMultiple">
</div>

When you change the object rec inside the controller the changes will be visible automatically in the html.

It's a simple answer to tell you the idea of what I think you should do with angular.