표현식을 다시 평가할 때 ng-class가 적용되지 않습니다.

이 코드는 오프라인 네트워크에 있으므로 여기에 붙여 넣을 수 없습니다. 나는 그것을 요약하고있다.표현식을 다시 평가할 때 ng-class가 적용되지 않습니다.

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

agents 목록이 아약스 요청을 통해로드됩니다

나는 다음과 같은 코드가 있습니다.

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 클래스는 변경되지 않습니다. 예를 들어, 상담원의 상태를 실행 중에서 오류로 변경하면 해당 상담원의 클래스가 '오류'로 변경되지 않습니다.

이상한 것은 예를 들면, 나는 NG 수준의 내부 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가 적용되지 않습니다.

답변

관련 문제