Question

我是Angular的新手（我使用的是1.6）我第一次面对数据绑定，我可以通过每3秒调用一次Web服务来加载和刷新页面上的数据。

但我无法弄清楚如何告诉角度来调用范围函数。当我第一次加载页面时加载假数据，每行我都会调用我的作用域函数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

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

查看

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

控制器

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

Answer 2

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

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

必须改为

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

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

AngularJS数据绑定范围函数

2 个答案: