ui-单元格中的网格按钮
ui-单元格中的网格按钮
提问于 2015-09-25 18:12:48
所以我已经在这个问题上挣扎了两天，但仍然不知道该怎么做…
首先，我对angular和javascript还是个新手，所以我写的任何东西都可能(也可能)是非常错误的。
示例数据：
{
'title' : 'awesome title',
'date' : '19-05-2015',
'place' : 'nice place',
'person' : 'Juliet Peterson',
'status' : 'OK'
}我需要的是，在一个现有的ui网格中，添加一个列包含或者如果myData.person只包含一个人，这个人如果myData.person是空的文本'No person‘如果myData.person包含多个人的文本'Choose from’点击将弹出一个列表供选择。
我的问题是，我目前无法让它工作。前两个案例运行良好，但我正在为最后一个案例而努力。
我们使用的是bootstrap，所以我喜欢下拉列表或弹出按钮
下面是我当前的代码：
html：
<div id="grid_post_id" ui-grid="gridPostOpts" ui-grid-edit class="grid"></div>js：
$scope.choosePerson = function(a) {
if (a.length == 0) {
return 'No person';
} else {
var split = a.split(',');
if (split.length > 1) {
var res = '<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="';
for (var i = 0; i < split.length; i++) {
res = res + split[i];
}
res = res + '">Choose from</button>'
return res;
} else {
return a;
}
}
}
$scope.gridPosteOpts = {
columnDefs : [
{
name : 'Title',
field : 'title',
enableCellEdit : false
},
[...]
{
name : 'Person',
cellTemplate : '<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div>',
enableCellEdit : false
}当我在我的单元格中获得正确的数据时，这段代码几乎可以正常工作，但它是显示的，而不是解释为html (例如，我的单元格包含字符串'
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-09-25 18:19:45
使用
cellTemplate : `
<div class="ui-grid-cell-contents">
<button type="button" class="btn btn-default" data-container="body"
data-toggle="popover" data-placement="right"
data-content="{{grid.appScope.choosePerson(row.entity.person)}}">
Choose from
</button>
</div>`让choosePerson()只返回数据。
不能使用angulars {{}}将元素注入到DOM中。它将始终是纯文本的
Stack Overflow用户
发布于 2015-09-25 20:16:09
最终，我使用了在SO上找到的不同方法的混合来做到这一点！
我为“按钮需要”使用了@j2L4e模板，而在其他情况下只使用了文本；我使用ng-if在两者之间进行选择
下面是“最终”代码：
$scope.containsComma = function(a) {return a.contains(',')};
$scope.choosePersonBis = function(a) {
if (a.length == 0) {
return 'No person';
} else {
var split = a.split(',');
if (split.length > 1) {
var res = '';
for (var i = 0; i < split.length; i++) {
res = res + split[i];
}
return res;
} else {
return a;
}
}
;
$scope.gridPosteOpts = {
columnDefs : [
{
name : 'Title',
field : 'title',
enableCellEdit : false
},
[...]
{
title : 'Person',
cellTemplate : `
<div ng-if="grid.appScope.containsComma(row.entity.person)"
class="ui-grid-cell-contents">
<button type="button" class="btn btn-default"
popover="{{grid.appScope.choosePersonBis(row.entity.person)}}"
popover-placement="right"
popover-trigger="focus">
Choose person
</button>
</div>
<div ng-if="grid.appScope.notContainsComma(row.entity.person)"
class="ui-grid-cell-contents">
{{grid.appScope.choosePersonBis(row.entity.person)}}
</div>`
}
};Stack Overflow用户
发布于 2015-09-25 18:31:00
尝试替换此代码
<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div>使用
<div class="ui-grid-cell-contents" ng-bind-html="grid.appScope.choosePerson(row.entity.person)"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32779906
复制相关文章
相似问题