3

私はアプリを構築しています。私の index.html は次のようになります。

<html ng-app='myApp'>
 <body ng-controller='mainController'>
   <div ng-view>
   </div>
 </body>
</html>

私のメイン モジュール js は次のようになります。

var myApp = angular.module('myApp',['ngRoute','mycontrollers']);

myApp.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {tableType:'=tableType'},
    templateUrl: '../html/table.html'
  };
});

私のコントローラー JS は次のようになります。

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

mycontrollers.controller('mainController', function ($scope) {

   $scope.getCellColor = function (value) {
        if(value===20){
            return 'sucess';
         }           
         else {
            return 'error';
         }
   };
});

mycontroller.controller('unitTableController', function($scope,unitdata) {
  $scope.something = {data: unitdata.getData()};
});

mainControllerは親コントローラーであることに注意してください。unitTableControllerは mainController から継承します。

ディレクティブcountTableテンプレートは unitTableController によってロードされます。

table.htmlは次のようになります。

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor(col)">{{col}}</td>
   </tr>
 </table>

ディレクティブを保持する html は次のようになります。

<div>
  <count-table table-type='something'></count-table>
</div>

現在、ディレクティブは正しいデータを本来の形式で出力していますが、親のmainControllerのgetCellColor()メソッドが呼び出されていません。

unitDataは、データが残りのデータを取得するサービスですが、ここでは問題ではありません。

セルの値の条件に基づいて、テーブル セルのクラスを設定する必要があります。既存のテーブル/グリッド ツールは使用したくありません。ツールを使用するための非常に単純なテーブルです。私が間違っていることはありますか、またはその値に基づいてセルのクラスを取得するより良い方法はありますか?

呼び出されるメソッドのスコープに問題がある可能性があります。

提案してください。

4

2 に答える 2

2

getCellColor次のようにメソッドをディレクティブに渡します。

<count-table table-type='tableType' 
get-cell-color='getCellColor(col)'>
</count-table>

ディレクティブは次のようになります。

app.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {
      tableType:'=tableType',
      getCellColor: '&'
    },
    templateUrl: 'table.html'
  };
});

ディレクティブ テンプレートは次のようになります。

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor({col: col})">{{col}}</td>
   </tr>
 </table>

プランカー

于 2014-06-11T15:47:59.093 に答える
0

getCellColor({{col}}) の代わりに getCellColor(col) を使用します

ng-class は $scope.$eval() を使用して式を評価します。ブラケットのペアを使用する必要はありません

更新: getCellColor(col) メソッドを使用してクラスを変更できますが。評価できるのは一度だけです。各列にプロパティを設定することをお勧めします。

于 2014-06-11T05:33:01.573 に答える