1

私の目標は、セルの値に基づいて性別列に色を付けたり、アイコンを表示したりする最も簡単な例で、ui-grid セルで動的な CSS クラスを実現することです。CSS クラスは、ページ上の現在のデータに従って更新されます。グリッドにバインドされたデータを更新するボタンをクリックすると、クラスが再計算されます。

動的 CSS クラスの作成者や貢献者からの例がたくさんあります。http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayedただし、ページの読み込み中にクラスを条件付きで適用する方法と、 need は、上記の基本的な angular ng-class の動作方法で説明したように、ページ コンテンツの変更に関するルールを再適用する動作を取得する方法です。

ui-grid では、列定義でセル テンプレートまたはセル クラス メカニズムを使用できますが、どちらもここでは機能しないようです。

 cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (grid.getCellValue(row ,col).toLowerCase() === 'male') {
      return 'blue';
    }
  }

cellTemplate: 
    '<div ng-class="{ blue: \'{{COL_FIELD.sex}}\' == \'male\', 
    green: \'{{COL_FIELD.sex}}\' == \'female\'}">
    {{ COL_FIELD.first }} {{ COL_FIELD.last }}</div>'

この問題の完全な例を含む plunkr を作成しました: https://plnkr.co/edit/rob144gVQo6uy1AVuJlS

また、グリッド オブジェクトと角度の $scope.apply でさまざまな更新メソッドを呼び出してみましたが、効果はありませんでした。

4

2 に答える 2