Angular JS:如何刷新表中的数据

时间:2015-11-04 11:36:55

标签: javascript html angularjs

我正在为我的问题寻找解决方案,但我找不到任何人来解决它!

HTML中的表格

    <div ng-controller = "paginatorPerfilPrivadoController">
        <table ng-table = "table_private_profile" class = "table-bordered table-hover table-striped" data-toggle="table" data-cache="false">
    //Headers and rows
        </table>
        <div class = "row">
        <div class = "col-md-2"></div>
        <div class = "col-md-6 center-paginator">
            <uib-pagination  
                      ng-model="currentPage"
                      total-items="list.length"
                      items-per-page = "itemsPerPage"
                      max-size="maxSize"  
                      boundary-links="true"
                      class="pagination-bg" 
                      previous-text="Anterior" 
                      next-text="Siguiente" 
                      first-text="Primero" 
                      last-text="Último"
                      >
                </uib-pagination >                                      
           </div>
     <div class = "col-md-4 align-right">
        <div class = "row paginator-right">
           <div class = "col-md-9 text-paginator-right align-right">
               <span class = "negrita">Total registros: </span><span id= "total-registros">{{list.length}}    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class = "negrita">Ver por página:</span>
            </div>
            <div class = "col-md-3 align-right">
               <select class="form-control" ng-model = "totalFilasTabla" ng-options = "c.id as c.label for c in numeroFilas" ng-change = "cambiarNumeroFilas()">
               </select>
            </div>
        </div>
     </div>                             
   </div>
 </div>

enter image description here

要加载此表,我有一个控制器,它调用一般函数(buildTable())来获取数据并将此数据返回到表中。此功能在任何控制器之外。

JS:

    userProfileApp.controller("paginatorPerfilPrivadoController", ["$http", "$scope", "ServiceURL", function($http, $scope, ServiceURL){

buildTable($http, $scope, ServiceURL.url[3]);

}]);

function buildTable($http, $scope, url){
   $scope.filteredTable = [];
   $scope.currentPage = 1;
   $scope.numPerPage = 10;
   $scope.maxSize = 5;
   $scope.itemsPerPage = 10;

   //$http.get("/privado/usuario/getprivateprofiles")
   $http.get(url)
    .success(function(response){
        $scope.list = [];
        $scope.list = response.result;

        $scope.$watch('currentPage + numPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage);
            var end = begin + $scope.numPerPage;

            $scope.filteredTable = $scope.list.slice(begin, end);
        });
    }).error(function(response){
        console.log("Error al llamar a " + url);
    });

    /**
     * To select the number of rows to show in the table
     */
    $scope.numeroFilas = [
                        {label: 10, id: 1},
                        {label: 20, id: 2},
                        {label: 30, id: 3}
                        ];

    $scope.totalFilasTabla = $scope.numeroFilas[0].id;  //Number of rows in the combo
    $scope.numPerPage = $scope.numeroFilas[0].label;    //We inform to the number of rows to the paginator

    $scope.cambiarNumeroFilas = function(){
        $scope.numPerPage = $scope.numeroFilas[$scope.totalFilasTabla - 1].label;   //Number of rows per page
        $scope.itemsPerPage = $scope.numeroFilas[$scope.totalFilasTabla - 1].label; //Number of pages
    }   
}

所有这些代码都运行良好。问题是当我更新或删除表的某些数据时,因为我在数据库中进行了更新或删除,但我看不到这个动作反映在我的表中。

如果我更新了一行,我就做了这个步骤......

    userProfileApp.controller("mainController", ["$http", "$scope", "$controller", "ServiceURL", function($http, $scope, $controller, ServiceURL){
/**
 * Actualizamos perfil público o privado
 */
self.sendForm = function(profile){
    var data = $.param({
        id: $scope.profile.id,
        nombrePerfil: profile.nombrePerfil,
        descPerfil: profile.descPerfil
    });

    var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
    }

    var index;
    if (profile.webPublica)
        index = "x";
    else
        index = 4;

    //With this post I update the row
    $http.post(ServiceURL.url[index], data, config)
    .success(function(data, status, headers, config){
        //Mostramos caja de resultado de proceso
        self.show_resultado_perfil = !self.show_resultado_perfil;
        //Inicializar valores de la caja de resultado
        if (profile.webPublica){    //Web Pública

        }else{  //Web Privada
            //The update is OK, so I'm going to load again the table
            //To do that, we instantiate the controller again

             var ctrlPaginator = $scope.$new(); 
               $controller('paginatorPerfilPrivadoController',{$http, $scope : ctrlPaginator, ServiceURL });

            //Actualizamos textos de mensaje
            self.id_lista_perfiles = "volver_lista_perfil_privado";
            self.title_result = "Modificación de perfil";
            self.text_result = "Se ha realizado con éxito la actualización del perfil";             
        }
    })
    .error(function(){
        //Mostramos resultado KO
        self.show_resultado_perfil = !self.show_resultado_perfil;
    }); 
}

}]);

所有这一切都很好。我先更新行,然后再次获取数据再次加载我的表。第一次更新,第二次获取数据。

enter image description here

所以,一切正常,但我无法看到更改对我的数据。

我试图在控制器“paginatorPerfilPrivadoController”中调用reload()函数:

    userProfileApp.controller("paginatorPerfilPrivadoController", ["$http", "$scope", "ServiceURL", function($http, $scope, ServiceURL){

buildTable($http, $scope, ServiceURL.url[3]);
$scope.table_private_profile.reload() 

}]);

我有下一个错误:$ scope.table_private_profile未定义

我需要做什么才能看到我的数据在我的桌面上更新?

0 个答案:

没有答案