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屋!
查看全文