ui网格angularjs中的条件单元格模板

如何在下面的

ui网格中显示数据时添加条件：

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

$scope.status=[“活动”、“非活动”、“已删除”]；
$scope.gridOptions={
columnDefs：[{
字段：“代码”
}, {
字段：“名称”
}, {
字段：“状态”，
cellTemplate:“{status[row.entity.status]}”
}]
};

预期结果应为行状态显示
活动/非活动/已删除

这是你的电话号码

提前感谢。
您必须使用
外部示波器

在标记中，像这样定义gridholder

<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
  }]
};

var statusTxt=[“活动”、“非活动”、“已删除”]；
$scope.states={
showMe：功能（val）{
返回状态txt[val]；
}
};
var statusTemplate='{{getExternalScopes（）.showMe（row.entity.status）}}'；
$scope.gridOptions={
columnDefs：[{
字段：“代码”
}, {
字段：“名称”
}, {
字段：“状态”，
cellTemplate:statusTemplate
}]
};

或者使用角度过滤器

请注意，这仅呈现文本。最好的方法是将
myData
转换为真实的文本状态，然后再在ui网格中使用它。以防万一你以后想做一些基于文本的过滤

这里有一个
我为您提供了另一个不使用外部作用域的解决方案：

模板如下所示：

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

var statusTemplate='{{COL_字段==0？“活动”：（COL_字段==1？“非活动”：“已删除”）}'；

这是普朗克：

使用
细胞过滤器

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

columnDefs：[{
字段：“代码”
}, {
字段：“名称”
}, {
字段：“状态”，
cellFilter:“映射状态”
}]
app.filter（'mapStatus'，function（）{
var statusMap=[“活动”、“非活动”、“已删除”]；
返回函数（代码）{
如果（！angular.isDefined（code）| | code<0 | | code>2）{
返回“”；
}否则{
返回状态图[代码]；
}
};
});

如果解决此问题，我建议使用
ng

$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>'
    }]
};

$scope.gridOptions={
columnDefs：[{
字段：“代码”
}, {
字段：“名称”
}, {
字段：“状态”，
cellTemplate:“活动非活动”
}]
};
您必须更改模板。在angular ui grid中引用外部作用域时，可以使用grid.appScope

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

var statusTemplate={{{grid.appScope.status[row.entity.status]}}；
试试下面的脚本。它对我有用

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

app.controller（'MainCtrl'，['$scope'，
职能（$范围）{
var statusTxt=[“活动”、“非活动”、“已删除”]；
$scope.showMe=函数（val）{
返回状态txt[val]；
};
var statusTemplate='{{grid.appScope.showMe（row.entity.status）}}'；
$scope.gridOptions={
columnDefs：[{
字段：“代码”
}, {
字段：“名称”
}, {
字段：“状态”，
cellTemplate:statusTemplate
}]
};
$scope.gridOptions.data=[{
“代码”：“考克斯”，
“姓名”：“卡尼”，
“状态”：0
}, {
“代码”：“洛林”，
“名称”：“智慧”，
“地位”：1
}, {
“代码”：“南希”，
“名称”：“水域”，
“地位”：2
}];
}
]);
是的，很酷！尽管我仍然认为准备数据是最好的方法。对于许多州来说，这可能会变成一个冗长的模板。尽管如此：+1是的，你是如此正确。我想知道如果事情变得更复杂，该怎么办。所以我很高兴在上面找到了你的答案！这很有效。它也回答了我的酷东西！如果我不必根据值更改样式，我肯定会使用此选项。从现在起（3.0.0RC18）
getExternalScopes（）
不起作用，请使用
grid.appScope
，如下所示：
var statusTemplate={{grid.appScope.states.showMe（row.entity.status）}我正在使用“ui grid-v3.0.0-RC.18-2014-12-09”，getExternalScopes（）正在按预期工作。请记住，这些人正在努力工作以实现这一目标。如您所见（在文档中），关于外部作用域的教程已经不存在了，取而代之的是本教程。RC表示发行候选版本，不是最终版本。感谢@maingay的评论。我的意思是var statusTemplate={{{grid.appScope.status[row.entity.status]}；最简单的解决方案是使用ng，如果如上所述，则使用简单的解决方案！！