Question

所以我一直在努力解决这个问题2天，但仍然不知道该怎么做......

首先，我对角度和javascript非常新，所以我写的所有内容都可能（并且可能）非常错误。

示例数据：

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

我需要的是，在现有的ui-grid中，添加一个包含其中一列的列如果myData.person只包含一个persone，那么这个人如果myData.person为空，则文字为“没有人”。如果myData.person包含多个人，那么文本将从＆＃39;选择＆＃39;单击将弹出一个列表供选择。

我的问题是，我无法让它工作。这两个案例工作得很好，但是我在最后一个案例中挣扎。

我们正在使用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
    }

这段代码几乎正常工作，因为我在我的单元格中得到了rigth数据，但它显示而不是被解释为html（即我的单元格包含字符串＆＃39;＆lt; button type =＆＃34; bu .. 。＆＃39）

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

您无法使用角度{{}}将元素注入DOM。它始终是纯文本的

Answer 2

Finnaly使用SO上的各种不同方法自己设法做到了！

我使用@ j2L4e模板作为“需要按钮”的案例，而只使用了其他案例的文本;我用$data = array('us_id' => $_POST['us_id']); $stmt = $pdo->prepare("SELECT us_fk_ui_id FROM ws_users WHERE us_id= :us_id"); $stmt->execute($data); $us_fk_ui_id = $stmt->fetchColumn();

在两者之间做出选择

这是“最终”代码：

ng-if

Answer 3

尝试替换此代码

<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>

单元格中的ui-grid按钮

3 个答案: