angularjs - 单元格中的 ui-grid 按钮

Question

所以我已经为此苦苦挣扎了大约 2 天，但仍然不知道该怎么做......

首先，我对 angular 和 javascript 总体上还很陌生，所以我写的所有内容都可能(而且可能)是极其错误的。

示例数据:

{
    'title' : 'awesome title',
    'date' : '19-05-2015',
    'place' : 'nice place',
    'person' : 'Juliet Peterson',
    'status' : 'OK'
}

我需要的是，在现有的 ui-grid 中，添加一个列，其中包含 如果 myData.person 只包含一个人，这个人 如果 myData.person 为空文本“No person” 如果 myData.person 包含多个人，则单击文本“选择自”将弹出一个列表供选择。

我的问题是我目前无法正常工作。前 2 个案例工作正常，但我正在为最后一个案例而苦苦挣扎。

我们正在使用 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(即我的单元格包含字符串 '

最佳答案

Answer 1

使用

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() 只返回数据。

您不能使用 Angular {{}} 将元素注入(inject) DOM。它将始终是纯文本