AngularJS:迭代对象时代码不起作用 [英] AngularJS: code not working when iterating through object

问题描述

我试图从我的控制器 empctrl 在模板中填充 employee 对象列表.

这是控制器:

app.controller('employeeController', function ($scope, employeeService) {this.employees = {};this.populateTable = 函数(数据){this.employees = 数据；};var 错误 = 函数(错误){console.log("错误:" + err);};//调用服务列出所有员工console.log("服务被调用来填充表.");employeeService.output().then(this.populateTable, error);this.populateTable();});

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

<div class="table_column" style="width:2%">{{ $index + 1 }}</div><div class="table_column" style="width:8%">{{employee.employeeName}}</div><!-- 还有 7 列-->

用户界面中没有显示任何内容.
相反，如果我在控制器中编写 $scope.employees，它会起作用:

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

<小时>

如果有人可以证明 $scope 的正确使用以及 alias.abc 和 $scope.abc 之间的区别(其中 alias 是controller 的别名)，谢谢.

完全相同的问题是:AngularJS 控制器中的'this' vs $scope

感谢这个链接，PankajParkar.

解决方案

问题是您在 populateTable 函数中访问的 this 不是 this，您在控制器函数中拥有该代码.

最好将 this 变量保存在某个变量中，这样通过拥有它，您将确保引用正确的对象.

控制器

app.controller('employeeController', function ($scope, employeeService) {var vm = 这个；vm.employees = {};vm.populateTable = 函数(数据){vm.employees = 数据；};var 错误 = 函数(错误){console.log("错误:" + err);};//调用服务列出所有员工console.log("服务被调用来填充表.");employeeService.output().then(vm.populateTable, error);vm.populateTable();});

有关更多详细信息，我强烈建议您阅读 这篇文章

如果您对 this 与 scope 感到困惑，请阅读 这个答案

I am trying to populate a list of employee objects from my controller empctrl in a template.

Here's the controller:

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();

});

However, this code that I wrote isn't working:

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

Nothing shows up in the UI.
Instead, if I write $scope.employees in the controller, it works:

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

Since I know how tempting it is to do $scope.<everything> in the controller, I'm trying to avoid using $scope as much as possible.

---

If someone could demonstrate the proper use of $scope and difference betwee alias.abc and $scope.abc (where alias is an alias of controller), I'll be thankful.

Edit: Exact same question is this: 'this' vs $scope in AngularJS controllers

Thanks for this link, PankajParkar.

解决方案

The problem is this which you are accessing inside populateTable function is not this which you have there in your controller function.

Better do keep this variable inside some variable, so that by having it you will make sure you are referring to correct object.

Controller

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();
});

For more detail, I'd highly recommend you to readup on this article

If you are confused with this vs scope then do read up on this answer

这篇关于AngularJS:迭代对象时代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！