我是 Angular 新手(我使用 1.6) 我第一次面对数据绑定(bind)，只需每 3 秒调用一次 Web 服务即可在页面上加载和刷新数据。
但我不知道如何告诉 Angular 也调用作用域函数。 当页面第一次加载时，我加载假数据，并且对于每一行，我都会调用作用域函数 job.rowColor 和 job.rowIcon，它们根据行状态返回 CSS 类。
但是当间隔到期并且我从服务器加载新数据时，我看到页面上加载了新数据，但没有从我的作用域函数计算的 CSS 类。 为什么？ 我错过了什么吗？
这是我的 html:
<div class="container" ng-controller="JobController as job">
<div class="d-flex flex-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Status</th>
<th scope="col">User</th>
<th scope="col">Report</th>
<th scope="col">Type</th>
<th scope="col">Files</th>
<th scope="col">Output</th>
<th scope="col">Start</th>
<th scope="col">End</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in job.data track by $index" class="table-{{job.rowColor($index)}}">
<th scope="row"><span class="oi oi-{{job.rowIcon($index)}}"></span> </th>
<th>{{row.Email}}</th>
<td>{{row.Type}}</td>
<td>{{row.Mode}}</td>
<td>{{row.TotalItems}}</td>
<td>{{row.Output}}</td>
<td>{{row.StartTime}}</td>
<td>{{row.EndTime}}</td>
</tr>
</tbody>
</table>
</div>
</div>
这是我的 Controller :
.controller('JobController',function($scope,$http,$interval){
var queue = this;
queue.loadJobs=function(){
$http.get('http://localhost:55006/jobs-list/20/null/null').
then(function(response) {
queue.data = response.data;
});
};
$interval(function(){ queue.loadJobs(); }, 3000);
queue.data=[
{Status:'running',Email:'mmassari@mail.sm',Type:'Report1',Mode:'Multipage PDF',TotalItems:23,Output:'E-Mail',StartTime:'12:05',EndTime:'--:--'},
{Status:'ok',Email:'mbaratti@mail.it',Type:'Report3',Mode:'Zipped PDF',TotalItems:39,Output:'E-Mail',StartTime:'12:05',EndTime:'10:30:15'},
{Status:'error',Email:'acanducci@mail.it',Type:'Report3',Mode:'Multipage PDF',TotalItems:120,Output:'E-Mail',StartTime:'12:05',EndTime:'10:15:55'},
{Status:'okerror',Email:'mmassari@mail.sm',Type:'Report5',Mode:'Zipped PDF',TotalItems:23,Output:'E-Mail',StartTime:'12:05',EndTime:'09:26:00'},
{Status:'wait',Email:'eemo@mail.it',Type:'Report1',Mode:'Single PDF',TotalItems:1,Output:'Download',StartTime:'--:--',EndTime:'--:--'},
];
queue.rowColor = function(index){
switch(queue.data[index].status){
case 'running': return 'primary';
case 'wait': return 'secondary';
case 'error': return 'danger';
case 'okerror': return 'warning';
case 'ok': return 'success';
}
}
queue.rowIcon = function(index){
switch(queue.data[index].status){
case 'running': return 'play-circle';
case 'wait': return 'media-pause';
case 'error': return 'x';
case 'okerror': return 'warning';
case 'ok': return 'check';
}
}
})
最佳答案
我花了很长时间才找出这个代码问题是什么，因为我认为这可能是 ng-repeat 中的一个错误。但最后我发现你的问题是 status 拼写错误(它在数据中是大写的)。
switch(queue.data[index].status){
必须更改为
switch(queue.data[index].Status){
这是工作中的jsfiddle: http://jsfiddle.net/arashsoft/2k3pojpv/2/
关于javascript - AngularJS 数据与作用域函数的绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48466394/