AngularJS 数据绑定与作用域函数

Question

我是 Angular 的新手（我使用 1.6） 我第一次面对数据绑定，只需每 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('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';
        }
    }
})                    

Answer 1

我花了很长时间来找出这个代码问题是什么，因为我认为这可能是 ng-repeat 中的一个错误。但最后我发现你的问题是拼写错误status（它在数据中大写）。

switch(queue.data[index].status){

必须改为

switch(queue.data[index].Status){

这是工作的 jsfiddle： http://jsfiddle.net/arashsoft/2k3pojpv/2/

Answer 2

我建议您始终传入实际对象，而不是传入索引。

查看

class="table-{{job.rowColor(row)}}"

控制器

queue.rowColor = function(row){
        switch(row.status){
        .....