Search code examples
angularjsviewangularjs-ng-repeatangular-bootstrap

Pagination won't load all data from a ng-repeat after i reload


im using ng-repeat to display all values from a database using mysql, im converting the data to string in a php script shown here.

<?php 

   require("../easyCRUD/Usuarios.class.php");
   require("../easyCRUD/TipoUsuario.class.php");

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8"); 

   $usuario = new Usuarios();
   $tipousuario = new TipoUsuario();  

   $usuarios = $usuario->all();     
 $data="";
$len = count($usuarios);
$i = 0;

foreach($usuarios as $ban){
    //echo "i=".$i;
        $tipousuario->find($ban['id_tipo_usuario']);
    $data .= '{';

    $data .= '"id_usuario":"'  . $ban['id_usuario'] . '",'; 
    $data .= '"usuario":"'  . $ban['usuario'] . '",';   
    $data .= '"nombre":"'  . $ban['nombre'] . '",'; 
    $data .= '"apellido":"'  . $ban['apellido'] . '",'; 
    $data .= '"cedula":"'  . $ban['cedula'] . '",'; 
    $data .= '"correo":"'  . $ban['correo'] . '",'; 
    $data .= '"telefono":"'  . $ban['telefono'] . '",'; 
    $data .= '"estado":"'  . $ban['estado_cliente'] . '",'; 
    $data .= '"tipo_usuario":"'  . $tipousuario->tipo_usuario. '"';

    $data .= '}';
    if ($i != $len - 1) {
    $data .= ',';
    }
     $i++;
}
echo '{"records":[' . $data . ']}'; 
?>

then in the controller i bind the data to the scope.

$scope.getAll = function(){
    console.log("starto");
    $http.get("procesos/read_usuario.php").success(function(response){
        $scope.names = response.records;


        console.log($scope.names);
    console.log("finish");
    });
}

and in the view i show the values in with a ng-repeat

<tbody ng-init="getAll()">
        <tr ng-repeat="d in names | filter:search | startFrom:(currentPage - 1 )*pageSize | limitTo: pageSize">
            <td class="text-align-center"  >
                <p class="text-center">{{ d.id_usuario }}</p>
            </td>
            <td>
        {{d.usuario}}   
            </td>
            <td>
            <p class="text-center" >{{d.tipo_usuario}}</p>  
            </td>
            <td>
            <p class="text-center" >{{d.nombre}}</p>    
            </td>
            <td>
            <p class="text-center" >{{d.apellido}}</p>  
            </td>
            <td>
            <p class="text-center" >{{d.cedula}}</p>    
            </td>
            <td>
            <p class="text-center" >{{d.correo}}</p>    
            </td>
            <td>
            <p class="text-center" >{{d.telefono}}</p>  
            </td>
            <td>
            <p class="text-center" >{{d.estado_cliente}}</p>    
            </td>
            <td>

            <a ng-click="readOne(d.id_usuario)" class="btn btn-primary" id={{"aElement"+d.id}} >Edit</a>    

        <a ng-click="deleteElement(d.id_usuario)" class="btn btn-Danger">Delete</a>

            </td>

        </tr>

in my console it displays all the data correctly even "usuario" but when i render it in the view the only value that doesn't show is "usuario".

view render

edit: it seems to be a problem with pagination, im using angular-bootstrap pagination, if i click next it shows the missing values.


Solution

  • turns out it was the pagination, i didnt set the value of the current page and the page size.

    $scope.pageSize=5;
    $scope.currentPage=1;