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

Answer 5

由于以下行，您的方法无效：this.candidateInfo=response;。

您正在将回调函数作为query函数的参数传递。在回调函数体内，this指向Window而不是您的控制器。

这就是var vm = this; + vm.candidateInfo = response;方法正常工作的原因 - 您将所需的引用存储为单独的变量。

“控制器为”语法不能与ng-repeat一起使用

5 个答案: