Angular JS view not updating

Question

I am trying start with promises and angularJS.

My backend is returning the correct values, but my html view doesn´t show my table with the data returning from backend.

What is wrong here?

Here is my HTML:

<div ng-app="clinang" ng-controller="pacientesCtrl">
     <a class='btn btnprimary' href='/getdadospac/?oper=S' >Button</a> 
     <table ng-table="tableParams" class="table" show-filter="true">
        <tr ng-repeat="paciente in $data">
            <td title="'Pront'" filter="{ name: 'text'}" sortable="'pront'">
                {{paciente.pront}}</td>
            <td title="'Nome'" filter="{ age: 'number'}" sortable="'nome'">
                {{paciente.nome}}</td>
        </tr>
    </table>
 </div>

Here is my JSON data returning from the backend:

{"draw":1,"recordsTotal":5303,"recordsFiltered":5303,
"data":[{"DT_RowId":"4367","pront":"4367","nome":"XXXXXXXXX","endereco":"RUA TEODORO DA SILVA,294\/314","bairro":"VILA ISABEL","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2567*0440","cpf":"","email":""},
{"DT_RowId":"21","pront":"21","nome":"YYYYYYYYY","endereco":"R ARAGUAIA","bairro":"PARQUE CHUNO","cidade":"DUQUE DE CAXIAS","estado":"RJ","telefone":"35637685","cpf":"02570293709","email":"[email protected]"},
{"DT_RowId":"23","pront":"23","nome":"ZZZZZZZZZZ","endereco":"rua 18 de outubro 241 101","bairro":"tijuca","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"","cpf":"","email":""},
{"DT_RowId":"24","pront":"24","nome":"AAAAAAAAAAA","endereco":"RUA MARIZ E BARROS 470 APTO 610","bairro":"TIJUCA","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"22646701","cpf":"53551192715","email":""},
{"DT_RowId":"27","pront":"27","nome":"AAAAAAAA GON\u00C7ALVES","endereco":"rua an\u00E1polis 251","bairro":"nova igua\u00E7u","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"3101-9648","cpf":"","email":""},
{"DT_RowId":"28","pront":"28","nome":"ASKLJALDJSLKADJ","endereco":"lucio de mendon\u00E7a 24 apt 501","bairro":"maracana","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2568-9519","cpf":"04301072772","email":""},
{"DT_RowId":"30","pront":"30","nome":"SADFSADFASDFSD","endereco":"RUA GRAVATAI N 61 APTO 302","bairro":"ROCHA MIRANDA","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"32787747","cpf":"","email":""},
{"DT_RowId":"29","pront":"29","nome":"ANASADFSA DOS SANTOS","endereco":"saboia lima 12 apt 04","bairro":"tijuca","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2204-1498","cpf":"48080152268","email":""},
{"DT_RowId":"31","pront":"31","nome":"JOAO SDAFSA SOUZA","endereco":"av dom helder camara 312 bl 05 apt 102","bairro":"benfica","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"","cpf":"075422437-64","email":""},
{"DT_RowId":"33","pront":"33","nome":"SKDJFSDAJFLASD","endereco":"fabio da luz 275 bl 04 apt 504","bairro":"meier","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"3979-0859","cpf":"","email":""}]}

JS CODE:

var app = angular.module("clinang", ["ngTable", "ngResource"]);
            (function() {

              app.controller("pacientesCtrl", pacientesCtrl);
              pacientesCtrl.$inject = ["NgTableParams", "$resource"];

              function pacientesCtrl(NgTableParams, $resource) {
                // tip: to debug, open chrome dev tools and uncomment the following line 
                debugger;

                var Api = $resource("/getdadospac/?oper=S");
                this.tableParams = new NgTableParams({}, {
                  getData: function(params) {
                    // ajax request to api
                    return Api.get(params.url())
                      .$promise
                      .then(function(rows) {
                          params.total(rows.recordsTotal); // recal. page nav controls
                          return rows.data;
                    });
                  }
                });
                 this.tableParams.reload();
              }
            })();

I am getting the next error in my JSON return: --> Where's the error? — Fissio
– Fissio, Commented Feb 8, 2017 at 14:29

Gerardo Rosciano · Accepted Answer · 2017-02-08 14:29:55Z

5

You have the controller, the call and everything but you need to bind the controller's variable to the view using scope

    function pacientesCtrl(NgTableParams, $resource) {
      vm = this;
      vm.rows = []

      ..
      .then(function(rows) {
        vm.rows = rows.data;
       }

then in your html:

    <tr ng-repeat="paciente in pacientesCtrl.rows">

You should read a book to learn angular, now that you played long enough. it will reinforce some concept and helped grow as dev. I did the same as you, get hands on angular and hit too many walls, then i read one book and everything changed

I also recommend this simple and fun course: https://www.codeschool.com/courses/shaping-up-with-angular-js

answered Feb 8, 2017 at 14:29

Gerardo Rosciano

9015 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luiz Alves Over a year ago

Thank you Gerardo. I have read some books. But I need to practice with more samples. It solves my problem.

Leonardo Chaia · Accepted Answer · 2017-02-08 14:39:49Z

I believe you need to either use ControllerAs syntax or use $scope.

ControllerAs: Since you're setting the tableParams on the controller instance, you'd need to use the ControllerAs syntax to assign an alias to the controller an access the property:

ng-controller="pacientesCtrl as ctrl" and also ng-table="ctrl.tableParams"

$scope

If you instead would like to use $scope, then you'd need to inject $scope into your controller and set the tableParams property into the $scope, something like:

var app = angular.module("clinang", ["ngTable", "ngResource"]);
        (function() {

          app.controller("pacientesCtrl", pacientesCtrl);
          pacientesCtrl.$inject = ["NgTableParams", "$resource", "$scope"];

          function pacientesCtrl(NgTableParams, $resource, $scope) {
            // tip: to debug, open chrome dev tools and uncomment the following line 
            debugger;

            var Api = $resource("/getdadospac/?oper=S");
            $scope.tableParams = new NgTableParams({}, {
              getData: function(params) {
                // ajax request to api
                return Api.get(params.url())
                  .$promise
                  .then(function(rows) {
                      params.total(rows.recordsTotal); // recal. page nav controls
                      return rows.data;
                });
              }
            });
            $scope.tableParams.reload();
          }
        })();

Notice that we're setting the tableParams property on the $scope and not on the controller instance. Your HTML should remain the same.

Personally I prefer the ControllerAs syntax, but both should work

Collectives™ on Stack Overflow

Angular JS view not updating

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related