Angular JS Ansicht nicht aktualisieren

Question

Ich versuche Start mit Versprechungen und angularJS.

Mein Backend gibt die korrekten Werte zurück, aber meine HTML-Ansicht zeigt nicht meine Tabelle mit den Daten vom Backend zurück.

Was ist hier falsch?

Hier ist mein 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> 

hier aus dem Backend meine JSON-Daten zurückgibt:

{"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":"jaceni@ig.com.br"}, 
{"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(); 
       } 
      })(); 

Answer 1

Sie haben den Controller, der Anruf und alles, aber Sie müssen die Controller-Variable an die Ansicht mit dem Bereich

binden

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

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

dann in Ihrem html:

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

Sie ein Buch Winkel lernen lesen sollte, jetzt, wo Sie lange genug gespielt. es wird ein Konzept verstärken und dazu beitragen, als Entwickler zu wachsen. Ich tat das gleiche wie du, bekommen die Hände auf Winkel- und zu viele Wände schlagen, dann las ich ein Buch und alles änderte

ich auch diese einfache und Spaß natürlich empfehlen: https://www.codeschool.com/courses/shaping-up-with-angular-js

Answer 2

ich Sie glauben, müssen entweder Einsatz ControllerAs Syntax oder benutze $ scope.

ControllerAs: Da Sie die tableParams auf der Controller-Instanz sind einstellen, müssen Sie die ControllerAs Syntax verwenden, um einen Alias ​​mit dem Controller einer Zugriffs die Eigenschaft zuweisen:

ng-controller="pacientesCtrl as ctrl" und auch ng-table="ctrl.tableParams"

$ scope

Wenn Sie stattdessen $ Umfang nutzen möchten, müssen Sie würde dann $ scope in Ihrem Controller und stellen Sie die tableParams Eigenschaft in den $ Umfang, so etwas wie injizieren:

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(); 
      } 
     })(); 

Beachten Sie, dass wir die Einstellung der tableParams Eigenschaft auf dem $scope und nicht auf dem Controller-Instanz. Dein HTML sollte gleich bleiben.

Persönlich bevorzuge ich die ControllerAs-Syntax, aber beide sollten funktionieren