當表達式重新評估時，ng-class不適用

此代碼來自離線網絡，因此我無法將其粘貼到此處。我正在總結它。當表達式重新評估時，ng-class不適用

我有以下代碼：

<tr ng-repeat="agent in agents" ng-class="agent.getClass()"> 
    <td>{{agent.server}}</td> 
    <td>{{agent.status}}</td> 
</tr>

的agents列表可以通過Ajax請求加載。

app.js：

angular.module('agentsApp', []) 

.controller('agentsController', function($scope, $http, $interval) { 

    $scope.agents = {}; 
    $interval(function() { 
     $http.get('/AgentsServlet').success(function(data) { 
      angular.forEach(data, function(agent) { 
       $scope.agents[agent.server] = new Agent(agent.server, agent.status); 
      }); 
     }); 
    }, 1000); 
});

Agent.js

var Agent = function(server, status) { 
    this.server = server; 
    this.status = status; 
} 

Agent.prototype.getClass = function() { 
    return { 
     success: this.status === 'RUNNING', 
     error: this.status === 'ERROR' 
    }; 
}

根據記錄，從一個簡單的文本文件AgentsServlet加載代理和他們的數據。

現在，當我改變文件內容時，下一個ajax請求會成功加載和更新表的內容但是，ng-class不會被改變。例如，如果我將代理的狀態從RUNNING更改爲ERROR，則其tr類不會更改爲「錯誤」。

奇怪的是，如果我把納克級內的getClass（）的邏輯，它的工作原理，如：

<tr ng-repeat="agent in agents" 
    ng-class="{success: agent.status==='RUNNING', error: agent.status==='ERROR'}"> 
    <td>{{agent.server}}</td> 
    <td>{{agent.status}}</td> 
</tr>

看來，函數調用的問題，而不是表達.. 任何想法？

感謝

來源

2014-06-24 orirab

ng-class假設從getClass（）返回一個cssClass =>表達式的數組。它不應該改變任何領域。字段狀態正在ajax成功回調中設置。 – orirab

HTML：

<tr ng-repeat="agent in agents" ng-class="agent.cssClass" > 
    <td>{{agent.server}}</td> 
    <td>{{agent.status}}</td> 
</tr>

JS：

function agent(server, status) { 

    this.server = server; 
    this.status = status; 

    this.cssClass = this.status ==='RUNNING'? 'success':'error'; 
    } 



var app = angular.module('app', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.agents = []; 

    var a1 = new agent(1, "RUNNING"); 
    var a2 = new agent(2, "ERROR"); 
    $scope.agents.push(a1); 
    $scope.agents.push(a2); 

});

來源

2014-06-24 14:37:11 sylwester

它不工作..它甚至不是一個正確的js語法，因爲我知道它。 {}應該是key =>值而不僅僅是值。 – orirab

嘗試這種方法。 – sylwester

這種方法似乎可行，但它打破了mvc設計。我不想把控制器裏面的css類計算器.. – orirab

請試試這個：plunkr

功能劑（服務器狀態）{

this.server = server; 
    this.status = status; 

    this.cssClass = this.status ==='RUNNING'? 'success':'error'; 
    } 

var app = angular.module('app', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.agents = []; 


    var a1 = new agent(1, "RUNNING"); 
    var a2 = new agent(2, "ERROR"); 
    $scope.agents.push(a1); 
    $scope.agents.push(a2); 



}); 

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link href="style.css" rel="stylesheet" /> 
    <script data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-require="[email protected]"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <table> 
    <tr ng-repeat="agent in agents" ng-class="agent.cssClass" > 
    <td>{{agent.server}}</td> 
    <td>{{agent.status}}</td> 

</tr> 
</table> 
    </body> 

</html>

來源

2014-06-25 12:52:02 sylwester

當表達式重新評估時，ng-class不適用

回答

相關問題