ui-单元格中的网格按钮

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 包含多个人，文本 '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（即我的单元格包含字符串 '

Answer 1

尝试替换此代码

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

Answer 2

Finnaly 设法自己使用在 SO 上找到的不同方法的组合来完成它！

我为案例 "button needed" 使用了 @j2L4e 模板，其他案例只使用了文本；我在两者之间选择 ng-if

这里是 "final" 代码：

$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>`
    }
};

ui-单元格中的网格按钮

ui-grid button in cell

angularjs

angular-ui-grid