La syntaxe "Controller as" ne fonctionne pas avec ng-repeat

Question

J'essaie d'utiliser "controller as" avec ng-repeat mais je ne suis pas capable d'accéder aux données en html. Ci-dessous l'extrait de code:

Controller js:

angular.module('myApp') 
.controller('reportController', function (reportCandidate) { 
    reportCandidate.query(function(response){ 
     //$scope.candidateInfo = response; 
     this.candidateInfo=response; 
    }) 
}) 

.factory('reportCandidate', ['$resource', function ($resource) { 
     return $resource('http://localhost:3000/records', {});; 
    }]); 

app.js:

'use strict'; 
angular.module('myApp', [ 
    'ui.router', 
    'ngResource', 
    'myApp.version' 
]) 
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise('/viewDashboard'); 
    $stateProvider.state('viewReport', { 
     url: '/viewReport', 
     templateUrl: '../viewReport/viewReport.html', 
     controllerAs: 'report', 
     controller: 'reportController' 
    }); 
}]); 

HTML:

<tr ng-repeat="data in candidateInfo"> 
    <td>{{data.name}}</td> 
    <td>{{data.profession}}</td> 
    <td>{{data.skill}}</td> 
    <td>{{data.exp}}</td> 
    <td>{{data.gender}}</td> 
</tr> 

Que dois-je changer dans mon html pour obtenir des données affichées ?

Answer 1

Vous devez utiliser controller as variable (ici report) avec . dans la vue aussi.

<tr ng-repeat="data in report.candidateInfo"> 
      <td>{{data.name}}</td> 
      <td>{{data.profession}}</td> 
      <td>{{data.skill}}</td> 
      <td>{{data.exp}}</td> 
      <td>{{data.gender}}</td> 
</tr> 

il est préférable d'utiliser comme contrôleur syntaxe comme celui-ci dans le contrôleur.

angular.module('myApp') 
.controller('reportController', function (reportCandidate) { 
    var vm = this; 
    reportCandidate.query().$promise.then(
     function (response) { 
     vm.candidateInfo=response; 
    } 
    }) 
}) 

Answer 2

Vous devez utiliser l'objet controllreAs dans le modèle pour accéder aux variables du contrôleur. Votre boîtier à utiliser report.candidateInfo où report est votre object de controller

<tr ng-repeat="data in report.candidateInfo"> 
    <td>{{data.name}}</td> 
    <td>{{data.profession}}</td> 
    <td>{{data.skill}}</td> 
    <td>{{data.exp}}</td> 
    <td>{{data.gender}}</td> 
</tr> 

À autres détails vous look here.

Answer 3

Vous utilisez controllerAs: 'report'

donc en html vous devez utiliser <tr ng-repeat="data in report.candidateInfo">

<tr ng-repeat="data in candidateInfo"> works when you bind it to $scope 

Answer 4

// if you didn't tell in route ng-controller="reportController as report" 
<div> 
<tr ng-repeat="data in report.candidateInfo"> 
       <td>{{data.name}}</td> 
       <td>{{data.profession}}</td> 
       <td>{{data.skill}}</td> 
       <td>{{data.exp}}</td> 
       <td>{{data.gender}}</td> 
      </tr> 
     </div> 


angular.module('myApp') 
.controller('reportController', function (reportCandidate) { 
var self = this; 
    reportCandidate.query(function(response){ 
     //$scope.candidateInfo = response; 
     self.candidateInfo=response; 
    }) 
}) 

.factory('reportCandidate', ['$resource', function ($resource) { 
     return $resource('http://localhost:3000/records', {});; 
    }]); 

app.js: 
'use strict'; 
angular.module('myApp', [ 
    'ui.router', 
    'ngResource', 
    'myApp.version' 
]) 
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise('/viewDashboard'); 
    $stateProvider.state('viewReport', { 
     url: '/viewReport', 
     templateUrl: '../viewReport/viewReport.html', 
     controllerAs: 'report', 
     controller: 'reportController' 
    }); 
}]);