“Controller as”语法不能与ng-repeat配合使用

Question

我想用“controller as”与ng-repeat但我无法访问html中的数据。下面是代码片段：

控制器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> 

我应该我在HTML改变得到的数据显示？

Answer 1

您应该使用controller as变量（这里是report），.也是可见的。

<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> 

最好在控制器中使用控制器来作为这样的语法。

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

Answer 2

您必须使用模板中的controllreAs对象来访问控制器变量。在你的情况下使用report.candidateInfo其中report是你的控制器对象

<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> 

有关详细信息，你可以看看here。

Answer 3

您正在使用controllerAs: 'report'

所以在HTML，你需要使用<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' 
    }); 
}]);