web-dev-qa-db-ja.com

セルテンプレートで関数を使用する

私はui-gridでangularjsを使用しています。グリッドの1つの列には、適切にフォーマットされた日付としてレンダリングしたいタイムスタンプが含まれています。

今まではこうやってみましたが、関数が呼び出されることはありません。

_  $scope.formatDate = function(date) {
    return '42';
  };

  $scope.columns = [
    {field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
    {field: 'title'},
    {field: 'quantity'},
    //[...]
  ];
_

代わりに、関数呼び出しは文字列リテラルと見なされます。その結果、列には常にformatDate(*timestamp*)が表示されます。

私はそれらを受け取るときに各単一行に関数を定義することによってそれを達成する満足できない方法を見つけました：

_  $scope.columns = [
    {field: 'getFormattedDate()'},
    //[...]
  ];

  $http.post('/api/data/').success(function (data) {
    $scope.gridOptions.data = data.elements;

    $scope.gridOptions.data.forEach(function(row) {
      row.getFormattedDate = function() {
        return '42';
      }
    })
  });
_

より良い提案はありますか？

angularjsangular-ui-grid
13
Arnaud Denoyelle

ui-gridを使用してコントローラースコープレベルの関数にアクセスする場合は、grid.appScopeを使用できます。簡単な例を次に示します。

{
    name: 'date',
    cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
}

完全な例：

angular.module('myApp', ['ui.grid'])
    .controller('myCtrl', ['$scope', function ($scope) {

    $scope.parseDate = function (p) {
        // Just return the value you want to output
        return p;
    }

    $scope.parseName = function (p) {
        // Just return the value you want to output
        return p;
    }

    $scope.gridOptions = {
        data: [{
            name: "Foo",
            date: "2015-10-12"
        }, {
            name: "Bar",
            date: "2014-10-12"
        }],
        columnDefs: [{
            name: 'name',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseName(row.entity.name)}}</div>'
        }, {
            name: 'date',
            cellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.parseDate(row.entity.date)}}</div>'
        }]
    };
}]);

Fiddle Example

19
jnthnjns

関数出力を使用するには、引数ではなく関数呼び出し全体を式の中括弧で囲む必要があります。

<div class="ui-grid-cell-contents">{{ formatDate(row.entity.date) }}</div>
4
charlietfl

形式にHTMLを含めない場合、cellTemplateは何もしないことに注意してください。

フォーマットメソッド「formatRating（）」にヒットしません：

            columnDefs: [
            {
                name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
                cellTemplate: '{{grid.appScope.formatRating(row.entity.starRating)}}'
            },

cellTemplate：に<span>を追加して機能します

            columnDefs: [
            {
                name: 'starRating', headerCellClass: 'blue', headerTooltip: 'Star Rating',
                cellTemplate: '<span>{{grid.appScope.formatRating(row.entity.starRating)}}</span>'
            },

私のフォーマット方法：

        $scope.formatRating = function (starRating) {
        switch (starRating) {
            case "ONE": return "1/5"; break;
            case "TWO": return "2/5"; break;
            case "THREE": return "3/5"; break;
            case "FOUR": return "4/5"; break;
            case "FIVE": return "5/5"; break;
        }
    }
0
Adam Hey