0

このコードはオフライン ネットワークからのものなので、ここに貼り付けることはできません。まとめています。

次のコードがあります。

<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 のクラスは「エラー」に変わりません。

奇妙なことに、ng-class 内に 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>

関数呼び出しが問題であり、式ではないようです..何かアイデアはありますか?

ありがとう

4

2 に答える 2

0

これを試してください：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="angular.js@1.2.x"></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-25T12:52:02.260 に答える
0

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-24T14:37:11.017 に答える