ui-grid angularjs中的条件单元模板

Question

如何在ui-gridcellTemplate中显示数据时添加条件:

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

预期结果应为行状态显示Active/NonActive/Deleted.

这是掠夺者

提前致谢.

Answer 1

你必须使用externalScopes.

在您的标记中,像这样定义网格.

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

在您的控制器中使用此代码:

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

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

或者使用角度滤镜.

请注意,这只会呈现文本.最好的方法是myData在ui-grid中使用之前转换为具有真实文本状态.以防您以后想要进行基于文本的过滤.

这是一个Plunker

Answer 2

我建议使用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 3

我没有使用外部示波器为您提供另一种解决方案:

模板看起来像这样:

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

以下是plunker:

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

Answer 4

用一个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];
        }
    };
});

plunker