AngularJS：遍历对象时代码不起作用

Question

我正在尝试在模板中填充来自我的控制器 empctrl 的 employee 对象列表。

这是控制器：

app.controller('employeeController', function ($scope, employeeService) {

    this.employees = {};

    this.populateTable = function (data) {

        this.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(this.populateTable, error);
    this.populateTable();

});

但是，我编写的这段代码不起作用：

<div ng-repeat="employee in empctrl.employees.allEmployees" class="table_row">
    <div class="table_column" style="width:2%">{{ $index + 1 }}</div>
    <div class="table_column" style="width:8%">{{ employee.employeeName}}</div>
    <!-- 7 more columns -->
</div>

UI 中没有显示任何内容。
相反，如果我在控制器中写入 $scope.employees，它会起作用：

<div ng-repeat="employee in employees.allEmployees" class="table_row">

因为我知道在控制器中执行 $scope.<everything> 是多么诱人，所以我尽量避免使用 $scope。

如果有人能证明 $scope 的正确使用以及 alias.abc 和 $scope.abc 之间的区别（其中 alias 是控制器的别名），我会谢天谢地

编辑： 完全相同的问题是：'this' vs $scope in AngularJS controllers

感谢 link，PankajParkar。

Answer 1

问题是您在 populateTable 函数中访问的 this 不是您控制器函数中的 this。

最好将 this 变量保存在某个变量中，这样您就可以确保引用了正确的对象。

控制器

app.controller('employeeController', function ($scope, employeeService) {
    var vm = this;
    vm.employees = {};

    vm.populateTable = function (data) {
        vm.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(vm.populateTable, error);
    vm.populateTable();
});

有关更多详细信息，我强烈建议您阅读 this article

如果您对 this 和 scope 感到困惑，请继续阅读 this answer

Answer 2

将您的变量添加到 $scope 而不是 this，例如：

$scope.customers = {};

$scope.populateTable = function (data) {
    $scope.employees = data;
};

编辑： 这两种方法都有效。有关详细说明，请参阅 this article。

Answer 3

将 "this" 替换为 vm（视图模型）将解决您的问题。不污染 $scope 对象是 groovy 的事情。 this 是一个全局上下文，它的值取决于函数调用。

所以，在你的控制器中分配，

var vm = this;
  vm.empTable = function (data) {
  vm.employeeList = data.data; 
};

..并在控制器的其他地方使用 vm 对象。在一个视图中使用多个控制器时，保持代码整洁很有用。

别忘了给控制器取个别名，

<div ng-controller="MainCtrl as main">
    <div ng-repeat=" employee in main.vm.employeeList ">
        {{employee.name}}
    </div>
</div>

AngularJS：遍历对象时代码不起作用

AngularJS: code not working when iterating through object

scope

angularjs

angularjs-ng-repeat

angularjs-controller

angularjs-controlleras