「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' 
    }); 
}]);