angularjs - ui-grid angularjs の条件付きセル テンプレート

Question

ui-grid以下の cellTemplate にデータを表示するときに条件を追加する方法:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

期待される結果は、row status show になるはずActive/NonActive/Deletedです。

プランカーはこちら

前もって感謝します。

Answer 1

ng-ifこの問題を解決するために使用することをお勧めします。

$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'
    }]
};

Answer 2

外部スコープを使用しない別の解決策があります。

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

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

プランカーは次のとおりです。

http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

Answer 3

を使用しcellFilterます。

columnDefs: [{
    field: 'code'
}, {
    field: 'name'
}, {
    field: 'status',
    cellFilter: 'mapStatus'
}]


app.filter('mapStatus', function() {

    var statusMap = ['Active', 'Non Active', 'Deleted'];

    return function(code) {
        if (!angular.isDefined(code) || code < 0 || code > 2) {
            return '';
        } else {
            return statusMap[code];
        }
    };
});

プランカー

Answer 4

テンプレートを変更する必要があります。angular-ui-grid で外部スコープを参照する場合は、grid.appScope を使用できます。

var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';