如何在以下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>'
}]
};
预期结果应为行状态显示Active/NonActive/Deleted
。
以下是plunker
提前致谢。
答案 0 :(得分:28)
您必须使用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
}]
};
或使用角度滤镜。
请注意,这只是呈现文字。最好的方法是在使用ui-grid之前将myData
转换为具有真实文本状态。以防您以后想要进行基于文本的过滤。
这是Plunker
答案 1 :(得分:18)
我建议使用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>'
}]
};
答案 2 :(得分:14)
我在没有使用外部范围的情况下为您提供了另一种解决方案:
模板看起来像这样:
var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';
以下是摘要:
答案 3 :(得分:10)
使用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];
}
};
});
答案 4 :(得分:3)
您必须更改模板。当您在angular-ui-grid中引用外部作用域时,可以使用grid.appScope。
var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';
答案 5 :(得分:0)
尝试以下脚本。它对我有用。
app.controller('MainCtrl', ['$scope',
function($scope) {
var statusTxt = ['Active', 'Non Active', 'Deleted'];
$scope.showMe= function(val) {
return statusTxt[val];
};
var statusTemplate = '<div>{{grid.appScope.showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
columnDefs: [{
field: 'code'
}, {
field: 'name'
}, {
field: 'status',
cellTemplate: statusTemplate
}]
};
$scope.gridOptions.data = [{
"code": "Cox",
"name": "Carney",
"status": 0
}, {
"code": "Lorraine",
"name": "Wise",
"status": 1
}, {
"code": "Nancy",
"name": "Waters",
"status": 2
}];
}
]);